Setter method for timeline

Using JavaScript with Hype
1

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

2

in short: no

3

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.

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.

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.

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.

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.

1 Like
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.

9

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

10

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

11

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

12

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
        clearInterval(timer);
        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);
1 Like
13

Would make a nice Extension… :wink: