Setter method for timeline

(Fernando) #1

I need a setter method to change the duration of the timeline of an element. Would it be possible?
thank you very much!

(Hans-Gerd Claßen) #2

in short: no


Unfortunately not, but that’s an interesting suggestion. There was a request a while back for the adjustment of the speed factor (2x, 3x) of a timeline which may help you do what you’re attempting.

(Fernando) #4

Ooooh, but, all is in the DOM. I´m sure that this parameter can be modified. The question is were the parameter is. I´m sure this depend of the action of the element, (translate, transform, etc…).
Thank you very much to both. I will keep trying.

(Jonathan Deutsch) #5

To clarify, animations are not in the DOM and Hype does not use CSS Transitions, CSS Animations, nor even the Web Animation API - it uses its own animation engine storing the values in JSON and interpreted by a runtime. As Daniel mentioned we’ve definitely gotten the request to apply scale factors to timelines and give more programmatic control. A workaround now is that you could drive your own animations using the hypeDocument.goToTimeInTimelineNamed() function and then apply a scale factor. I know others have had success doing this, though I can’t presently find code examples to send.

(Fernando) #6

ouch! I understand you, forgive my insistence. I was very interesting in that, because depending of element´s velocity in a translation, the collision with other elements changes , and this is crucial for my games. Multiple scaled timeline is a good solution but this limits the accuracy in a game . Set the movement and control its duration is difficult when the movement is complex but I use this solution and simple movements.
I know that Hype is not made for this purpose but I am very happy using Hype to develop games for browser .
Anyway thank you very much.

(Jonathan Deutsch) #7

Gotchya; definitely an interesting use case! Note that we do have a setter API for elements that also has ways to do transitions and set durations:

hypeDocument.setElementProperty(element, propertyName, value, optionalDuration, optionalTimingFunctionName)

So in this regard if you needed a basic animation you could animate the ‘top’ and ‘left’ properties with an arbitrary duration.

(Porter Bayne) #8

I would LOVE this feature. We are trying to use Hype to render videos from Hype documents on the server-side. But PhantomJS needs to run the animation much more slowly to be able to capture the frames.

Being able to slow down an animation and all of its timelines by a scale factor or some other method would allow our designers to use Hype and seamlessly export to our rendering engine.

(Porter Bayne) #9

If anyone can find an example of what Jonathan mentions, using goToTimeInTimelineNamed() with a scale factor… that might do the trick for us.


First part of the code in this post would be interesting for you.

(Porter Bayne) #11

Thank you, it’s at least good to note.


not sure about your meaning here. The first part of the code (in the post that I linked to) has what you asked for :slight_smile: By creating your own loop and using Hype’s API you can run a timeline manually and then increase/decrease the speed accordingly.

I’ll try to break it down :wink:
This is a function that you create on scene load (setup)

moveTimeline = function(multiplier) {
    newtime = time +  0.0333 * multiplier;
    hypeDocument.goToTimeInTimelineNamed(newtime, 'test')
    time = newtime;
    if (time >= hypeDocument.durationForTimelineNamed('test')) { // when video gets to end. reset time and stop interval
        time = 0;

Then you can add this line below it (to start it automatically) or on click of another button

timer = setInterval(function() { moveTimeline(1) }, 33.3);

on any other action (click of another button for example) you can just add the same line but change the modifier to whatever you want.

timer = setInterval(function() { moveTimeline(0.2) }, 33.3); // decrease to 0.2
// or
timer = setInterval(function() { moveTimeline(3) }, 33.3); // increase speed 3x

you get the picture!

Also, a slight modification and you can use this on multiple timelines.

moveTimeline = function(timeline, multiplier) {
    newtime = time +  0.0333 * multiplier;
    hypeDocument.goToTimeInTimelineNamed(newtime, timeline)
timer = setInterval(function() { moveTimeline('test', 1) }, 33.3);

(Mark Hunte) #13

Would make a nice Extension… :wink: