Jump to content
GreenSock

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

Rotation and Scale Getter 2D/3D

Recommended Posts

Hi there,

GSAPJS does a great job to bring AS posibilities to JS.

However there is one thing that seems to be missing - and i might probably be out of scope but i'll go ahead and ask:

 

Is there a convenient way in GSAPJS to easily get values back from the transform property - scaleX, scaleY, RotationX, skewX etc... ?

Or do we need to work with the 2D and 3D matrix?

 

Right now I'm using $("selector").data(key, value) to store (set/get) these variable but I was hoping to find a better way of accessing these values in real time.

 

Anyways, here is an example that works fine using $().data() : http://jsfiddle.net/Dqg2n/3/

 

Thanks for your work, you make coding so conveninent!!

  • Like 1
Link to post
Share on other sites

Sure, we actually store that in a top-secret "_gsTransform" object that's attached to the DOM element :) You can snag the values there if you want, or check out Chris Gannon's helper: 

http://chrisgannon.wordpress.com/2013/01/11/greensock-properties-helper-class-for-javascript-and-jquery/

 

Just keep in mind that rotational values are in radians, not degrees. 

 

var scaleX = yourElement._gsTransform.scaleX;
 

I hope that helps!

  • Like 4
Link to post
Share on other sites

Hey, just wondering if since this post, there is now more of a formalised way to get at this data (other than the two not-so-formal options previously mentioned)?

  • Like 1
Link to post
Share on other sites

There's a tool in the works that'll make this slightly more "formalized", but we're not ready to release that quite yet. "Shockingly Green" and "Business Green" Club GreenSock members can request a preview of it, but I can't promise a specific launch date. It has some other fancy tricks it can do too, of course (related to transforms). :)

Link to post
Share on other sites

The way I get this information is to add it as a numeric property of the object being tweened:

 

myObj.myRotation = 0;

TweenMax(myObj, 1, {rotation:80, myRotation:80});

 

Then at any time, I can simply look at myObj.myRotation.

 

  • Like 2
Link to post
Share on other sites

There's a tool in the works that'll make this slightly more "formalized", but we're not ready to release that quite yet. "Shockingly Green" and "Business Green" Club GreenSock members can request a preview of it, but I can't promise a specific launch date. It has some other fancy tricks it can do too, of course (related to transforms). :)

 

Any idea on a release date? I am currently using typescript with greensock, and this unformal way is resulting in some ugly workarounds. If _gsTransform already exists, why not simply make it accessible with TweenLite.get(x) ?

Link to post
Share on other sites

We probably won't release that tool because it's very complex under the hood (costly to support) and I'm not sure the market really needs it. 

 

We don't offer something like TweenLite.get("property") because while it may seem very simple/obvious in this use case, there are many use cases where this could lead to confusion or an inability to support the method at all, or it'd be very costly to support kb-wise. For example, what would you expect to get back if you did TweenLite.get("bezier") or TweenLite.get("autoAlpha") (which is a combination of 2 values) or TweenLIte.get("directionalRotation")? It could open up a can of worms. Once we put it in, we'd probably have to support it for ALL properties. 

 

We don't have any plans to change the _gsTransform thing since so many people tap into it. You don't need to feel "dirty" for using it :) 

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

×