Trying to implement ticker to change animation duration

[Federico Giovannini]

I'm trying to implement a ticker so I can test different animation durations to get the right feel for what the duration should be but my method seems to not be working? Is it because the duration is set once and not updated? Am I meant to put the whole timeline behaviour description in my timeline duration setting function? That seems wrong. Would appreciate any pointers!

See the Pen vYvzBeq?editors=1111 by FedG-code (@FedG-code) on CodePen

[mvaneijgen]

You were not updating the `animationDuration` variable in your function, you were creating a nieuw one in the function it self. Also the value you get from the input is a string, which you have to convert to a number if you want to use it. My advies always console.log() your values so that you can make sure they are what you think they are. 

 

GSAP 'bakes' the animation on page load for the best performance, so that it only has to focus on where the elements should tween to, so indeed you can't just update some values to have it run again. 

 

The easiest solution I could think of is setting the .timeScale()  (https://greensock.com/docs/v3/GSAP/Timeline/timeScale()) of the timeline in your function and if you then set it to 0.5 it will play at half speed. Also instead of .play(0) you can call .restart(), then it will always play from the beginning.  Hope it helps and happy tweening! 

 

See the Pen NWeLMQK?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

[Federico Giovannini]

Oh actually your solution works with the command .totalDuration