Use an input value to change animation speed

[Jon Burdon]

I want to grab the value selected on a range slider and use it to change the speed of my tween.

 

I'm new to this, so I'm hoping this is a simple one. It looks like I need to refresh or restart the animation every time I change the value of the slider.

 

In the example here, tl2 is restarted and played when the button 'Shot 2' is clicked... but the variable called speed (grabbed from the slider) doesn't seem to ever be updated in the tween.

See the Pen gOBGJQr by jonburdon (@jonburdon) on CodePen

[Rodrigo]

Hi @Jon Burdon and welcome to the GreenSock forums!

 

In this cases is better to use fromTo instances and create them in the click events, that because GSAP will record the values on the first render and that could lead to odd results in the animations.

 

Here is a fork of your codepen:

See the Pen QWZOmEa by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[Jon Burdon]

I updated my original codepen (Sorry for not forking it) to update the timescale when the button is clicked. 
 

This seemed to work really well.