Change the duration of the animation in the timeline or the timeline itself

Animation
1

Here’s the problem:
my animation should be played out at different speeds according to variable values.
it’s about the flow speed of water in a tube. if i set the value to 10, the animation should last 10 seconds. if i set 1, the whole animation should be played in 1 second.

i used an interval function to control the timeline per js. which works so far, but the performance is terrible afterwards.

does anyone have an idea?

thx.
marc

2

If the rate of movement of an element should occur over different periods of time, you’ll need to use the Hype API to do this:

hypeDocument.setElementProperty('waterElement', 'left', 200, 1.2, 'easeinout')

The above code would move an element with the ID of waterElement so that it’s ‘left’ value is set to 200 pixels over the span of 1.2 seconds. Changing that ‘1.2’ would speed up or slow down that movement. More info here.

1 Like