Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


Recommended Posts

Morning all, hopefully this should be a simple for all you experts out there. I have a timeline with multiple tween instances as per the following


tl.to('#spinner1', interval, {rotation: 360, ease:Power0.easeNone, onRepeat:completeHandler1, delay: 1, repeat: -1, repeatDelay: 0}, 0)


it basically rotates a div containing an svg 360 degrees indefinitely. 


Here is my problem. The speed/duration of the first 360 degree spin is 120 seconds, but every minute I update the variable "interval" with a new speed/duration this time say 40 seconds. I need the spin to continue to 360 degrees but at the new duration/speed. This is then the new speed/duration for the continues spins until it gets updated again.


As i say I have multiple tweens like this that will either speed up or slow down mid tween depending on these updated variables.


Hoping someone can help on this.



Link to comment
Share on other sites

Hi nzbtorrent  :)


pls check these methods : 


.timeScale() : http://greensock.com/docs/#/HTML5/GSAP/TweenMax/timeScale/

.duration() : http://greensock.com/docs/#/HTML5/GSAP/TweenMax/duration/


these are common methods for Tweens and Timelines , check the Doc. :


TweenMax : http://greensock.com/docs#/HTML5/GSAP/TweenMax/

TimelineMax : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/


at the end ; that's better to make a reduced Codepen Demo for your questions : How to Create a CodePen Demo

  • Like 1
Link to comment
Share on other sites

Your interval variable only gets evaluated when then tween is created. changing its value while the tween is running is not going to have any impact on the tween.

Like Diaco advised, timeScale() and duration() methods allow you to dynmically control the "speed" of an animation at runtime, so you can do:

tl.timeScale(2) // will play twice as fast as normal
  • Like 1
Link to comment
Share on other sites

Here is a great demo that shows how you can tween the timeScale() of an animation (tween or timeline) while it is playing for super smooth acceleration and deceleration: 



Link to comment
Share on other sites

Hi, thanks for the help with this but I’m running into timing issues using timescale. I created a cut down version of my project   

See the Pen xZrJxo by anon (@anon) on CodePen

I need to vary the duration/speed of the animation mid spin, this is actually done via imported csv file, I’ve represented this by the vary timescale button. The counter should update on each revolution, if I use timescale as you will see if you press the button to speed up or slow down over time the animation and counter falls out of sync. My question is how do I update the counter per full revolution and be able to vary the speed of revolution?

Link to comment
Share on other sites

thanks for the demo. 

I watched it for a few minutes and could not detect anything getting out of synch. 


Based on how you have it set up that onRepeat should always fire on every repeat regardless of the timeScale(). 


Can anyone else confirm that the counter does not match the number of rotations?

Link to comment
Share on other sites

I am seeing the same thing as Carl.. nothing out of sync


Tested on Windows 7 (64-bit)  latest Firefox and Chrome :)

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.