Jump to content
Search Community

Get the current rotationX of an element

FrontEndWarrior test
Moderator Tag

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 need to get the rotationX of an element. I found a script Chris Gannon wrote:

http://www.gannon.tv/edge_demos/GreenProp.min.js

 
But it seems like this would be a default functionality of your library. If this is in your docs and I missed it, I apologize, please just point me the way.
 
I needed it for this cube example at line 142, if it's helpful: 
Link to comment
Share on other sites

Hi,

 

I've never worked with Chris' code so I can't tell you if it's working or not or it's proper use.

 

What I can tell you is that Chris' code fetches an arguably "top secret" object called _gsTransform; I say arguably because it's been posted so many times in the forums that I seriously doubt how secret it remains by now  ;) .

 

That object contains all the transform properties used by the engine whether they're being animated or not. Right now I'm working in a 3D stuff so I took a screen capture of dev tools so you can take a look at it:

nnnx.png

In order to use it you should use the following code:

TweenMax.set('#cube', {
            rotationX: remandingX,
            rotationY: remandingY,
            overwrite: true,
            onComplete: easeIntoSlot,
            onCompleteParams:["{self}"]
        });

function easeIntoSlot(tween)
{
    console.log('easeIntoSlot');
    var currentRotX = tween.target[0]._gsTransform.rotationX;
    var currentRotY = tween.target[0]._gsTransform.rotationY;
    //rest of your code
}

Also keep in mind that you'll get the rotation values in radians and not degrees, so if you want to use them in the latter you have to convert them like this:

var currentRotX = tween.target[0]._gsTransform.rotationX * (180 / Math.PI);
var currentRotY = tween.target[0]._gsTransform.rotationY * (180 / Math.PI);

If is not much to ask, could you please post the link of the completed app, is looking very nice and is quite fun.

 

Hope this helps,

Cheers,

Rodrigo.

  • Like 3
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.
×
×
  • Create New...