Get current angle of rotation after bezier autorotate

[Brickyenne 3 Likes (Newbie)]

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.

[GreenSock 11,877 Likes (Superhero)]

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?

[Brickyenne 3 Likes (Newbie)]

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!

[Brickyenne 3 Likes (Newbie)]

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.