Rotation

[nzbtorrent 0 Likes (Newbie)]

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.

 

Thanks

[Diaco 1,948 Likes (Superhero)]

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

[Carl 9,066 Likes (Superhero)]

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

[Carl 9,066 Likes (Superhero)]

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: 

 

http://codepen.io/GreenSock/pen/LuIJj

[nzbtorrent 0 Likes (Newbie)]

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?

[Carl 9,066 Likes (Superhero)]

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?

[Jonathan 5,176 Likes (Superhero)]

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

 

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