Jump to content


Get current angle of rotation after bezier autorotate

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've an animation of 52 elements over a curve (a circle) using bezier. Elements come from a certain point and join the circle, 26 in one half of the circle, 26 in the other. autoRotate is set to true. Elements are rectangular.


All 52 are clickable. After clicking any of the 52 they are moved to a different location. Problem is they preserve the angle of rotation they got following the curve.


Question is how get the current angle of rotation in order to do the math and rotate to recover the initial angle (before going into the circle).


Found here in the forums a solution but is not working:


TweenMax.to(document.getElementById(identifier),0.5,{css:{top:"10px", left:"10px"}, ease:Power2.easeOut});
            var transform = $("#card32")._gsTransform;
            var x = transform.x;
            var rotation = transform.rotationX;
All I get is : Cannot read property 'x' of undefined
Your help will be appreciated.
Link to comment
Share on other sites

It looks like you're trying to get the "_gsTransform" of a jQuery object instead of the actual element itself. Also note that there will only be a _gsTransform on elements that you've performed transforms on (like rotation, x, y, scale, skew, etc.) through GSAP. "top" and "left" are not transforms. 


Also keep in mind that rotational data is described in radians, not degrees. 


If you need that in degrees, just multiply it by (180 / Math.PI).


If you're using jQuery, you could just grab the first element, like this:


Does that help?

  • Like 1
Link to comment
Share on other sites

Absolutely! It works! The deeper I get into GSAP the more I like it! It's my animation engine by default now.


Looking closer, I did try that...I don't know some typo maybe, thing is it works perfectly now.


Really appreciate your help, thank you!

  • Like 1
Link to comment
Share on other sites

After good advice from Jack of GSAP staff by providing a way of determining the current angle of an element after being rotated by following a bezier curve in order to do the required math to return it to initial angle (before entering the bezier curve), well it's not necessary. Jack's method works excellent but in this case its not required.


Just do this:


TweenMax.to(document.getElementById(identifier),0.5,{css:{top:"10px", left:"10px", rotation:0}, ease:Power2.easeOut});


That's right, rotation 0, and element returns to initial state. I'm applying a top and left animation, to pull the element out of the bezier to a different location.


Hope it helps.

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.