Jump to content

Roger Wu

the rotation speed become faster than before

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

hello,i've got a problem with the TweenLite rotation.



I use


TweenLite.to($("#nav6"), .5, {css:{rotation:300}});

to initllize the position of the element.



when i run

TweenLite.to(nav6, 1, {css:{directionalRotation:"300_cw"}});

to control an element rotate first time,it works well.


but after i run


TweenLite.to(nav6, 1, {css:{directionalRotation:"50_cw"}});

to reset the position of the element, when i run


TweenLite.to(nav6, 1, {css:{directionalRotation:"300_cw"}});

again, the movement of the element become faster than before,it looks like rotate more than 360deg


anybody can help me?

thanks a lot!

Link to comment
Share on other sites

Ok I've set up a bit of a sandbox at:

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


Click the wheel to see your tweens in order, otherwise use the buttons to string some rotation tweens together.


When running your tweens I can't seem to reproduce rotations over 360 degrees. However, if you load the codepen and continually tween CCW to 300, there is definitely some over-rotation. It's even more pronounced in Chrome where the rotation stacks and it ends up rotating thousands of degrees per tween. These are supposed to be absolute values, so not really sure what's going on here.

  • Like 1
Link to comment
Share on other sites

Thanks for putting that codepen together, Jamie. Very nice. 


The issue simply has to do with the fact that in order to do directional rotations, the end values must be compensated, meaning if the current rotation is 0 and you want to tween to 300 counter-clockwise, that actually must be translated internally to be -60 degrees (because tweening from 0 to -60 goes in the correct direction, counter-clockwise). So then when you tween again to 300 counter-clockwise, it is starting at -60 so when it calculates the difference between the starting and ending values it does "new (300) minus old (-60) equals difference (360)". 


Anyway, I'm going to tweak the code so that at the end of the tween, it forces the rotation to exactly what you fed in rather than allowing it to end at a compensated value. For example, tweening 0 to 300 counter-clockwise would indeed tween 0 to -60, but then at the very end, it'll just swap in 300 for -60 (which will look identical, but ensure that if you tween again, it's starting from the precise value you defined last time). 


This change will be in the 1.9.1 release which is due out very soon. If you need an advanced copy, let me know.


Thanks for pointing this out, guys. 

Link to comment
Share on other sites

thank you both,


I used  VERSION: beta 1.24 before,it works well(only for this rotate effect).


I've tried many times to fix the issue that i've found,but i failed...


I hope the 1.9.1 can be download qucikly,so i can complate my website.


haha,thanks anyway

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.