Jump to content
GreenSock

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

Get current angle of rotation after bezier autorotate

Recommended Posts

Hello,

 

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;
                console.log(rotation);
 
All I get is : Cannot read property 'x' of undefined
 
Your help will be appreciated.
Link to post
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. 

console.log(document.getElementById("card32")._gsTransform.rotation); 

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:

$("#card32")[0]._gsTransform.rotation

Does that help?

  • Like 1
Link to post
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 post
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 post
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.

×