Jump to content


Rotation in latest GSAP with Bezier Plugin

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

I have an animation that uses the bezier plugin and the autoRotate function within it. After updating to the latest version of GSAP the rotation is no longer occurring, causing the animated element to look unnatural. I haven't run any significant tests as I am pressed for time with other projects but I was just wondering if there is a quick fix on my end. I know there were some updates to how rotation is handled in the latest update and if there is anything I need to do to update my code any assistance would be appreciated.


Here is he snippet that makes the path and rotation:

{bezier:{type:"soft", curviness:1.25, values:[{x:0, y:-200}, {x:300, y:-400}, {x:800, y:-200}, {x:1010, y:-300}], autoRotate:["x","y","rotation",1.5,true]}

I can't provide the link to the source since it's a closed production environment but if it helps I can create a test page somewhere when I get some time. Thanks.

Link to comment
Share on other sites

Ah yes, this is related to the fact that in 1.11.0 we switched from using radians under the hood for rotations in CSSPlugin to using degrees to make it more consistent with everything else. Trust me - this is a good thing. Anyway, your autoRotate was defining rotational data in radians. All you need to do is change two values:

//OLD (radians)

//NEW (degrees)

We mentioned the change from radians to degrees here: http://www.greensock.com/update-2013-10/ but we didn't specifically mention how it affected BezierPlugin's custom autoRotate, so I certainly don't blame you for being confused by the odd behavior.  Sorry about that. We try VERY hard to maintain backwards compatibility and avoid little changes in behavior like this but we felt the change was important enough to warrant the potential hassle especially because so few people need to define custom autoRotate values (usually folks just use autoRotate:true). Again, sorry about the confusion. Let us know if the above suggestion resolves things for you. 

  • Like 1
Link to comment
Share on other sites

I figured that it was tied to the change from radians to degrees, yet I didn't have an immediate way of testing it. I just ran it through production and everything is back to normal, except the proper conversion for 1.5 radians is ~86, 270 made the animated element fly backwards :) Thanks for the swift response, I appreciate it.

Link to comment
Share on other sites

Ah yes, sorry. 180 / Math.PI * 1.5. 


Glad you got it figured out. Happy tweening!

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.