GreenProp.js: a Javascript and jQuery static helper class for Greensock properties

GreenProp.js

Update 26-09-2013 – due to changes in the way rotation values are stored in the latest GSAP version I have updated GreenProp.js to reflect these changes.

The rotation values were originally stored as radians but they have now changed to the more usable degrees.

Get the updated uncompressed GreenProp.js here

Get the updated minified GreenProp.min.js here.

*****************************************

First of all I’d like to wish you all a happy new year!

I’m going to make this post a quick one as I’m hoping it’s not only simple to understand but also, and most importantly, very useful.

What is it?

It’s called ‘GreenProp.js‘ and it’s a static JavaScript helper class that simply accepts either a Javascript or jQuery obj (‘element’ or $(“element”)) and returns the Greensock property for that object. I’ve created it mainly because currently there’s no way (that I know of) to access transform properties from GSAP and it’s now become a necessity for me in the work I’m doing. Also quite a few people have asked me about how to access Greensock properties (like rotationX, rotationY etc).

Some of you who’ve already been diving into the brilliant Greensock animation platform (GSAP) may already have come across the _gsTransform object in your console output. This is where Jack stores all those lovely goodies we want.

This helper ‘class’ simply gives you a neat way of accessing those goodies (it also converts the 3D rotation values stored in _gsTransform from radians to degrees).

So all you need to do is include ‘GreenProp.js‘ in your code (and obviously the GSAP libraries) and initialise your element using TweenLite.set on any property like this:

//this adds the Greensock _gsTransform object to your element - it doesn't need to have any visual effect at all
TweenLite.set(myElement, {css:{x:0}});

Then, when you want to, say, retrieve the current rotationY or scaleX of an element you can simply write:

//passing in a JavaScript element
var myElementRotationY = GreenProp.rotationY(myElement);

Or

//passing in a jQuery element
var myElementScaleX = GreenProp.scaleX($("cube"));

The properties it can return are as follows:

  • rotationX
  • rotationY
  • rotationZ (you can pass in either rotationZ or just rotation)
  • scaleX
  • scaleY
  • scaleZ
  • x
  • y
  • z
  • perspective
  • skewX
  • skewY
  • zOrigin

That’s it – I hope you find it useful!

Note: I haven’t tested it extensively yet and if Jack changes the _gsTransform object it might get messed up.

I’m sure it could probably be made smaller too by using an alternative method like passing in a property as a string like GreenProp(myElement, “scaleX”). Doing it this way I could evaluate the string to the required property using fewer lines of code and pass back the property as a value – this would probably make the file smaller.

However I just don’t like the whole ‘strings’ thing in JavaScript – they’re messy and I prefer proper, solid methods which to me seem to be far more trustworthy(!).

But, hey, that’s just me.

Download GreenProp.js here (1.78Kb)

Download GreenProp.min.js here (1.16Kb)

10 thoughts on “GreenProp.js: a Javascript and jQuery static helper class for Greensock properties

  1. this is exactly what i need, however the links to download the js are both broken. is the helper class on github or anything? thanks!

    1. AFAIK the only way to retrieve them is to access the GSAP JS object like:

      element._gsTransform.x

      This works fine but this _gsTransform object also stores radians for 3D rotation properties so GreenProp.js handily converts them to degrees for you. You could easily just do:

      element._gsTransform.rotationX * (180/Math.PI);

      GreenProp.js (hopefully) makes accessing these properties a little more usable, readable and consistent.

  2. Hi Chris,
    I have to say that you save me couple hours of my life , Thank MAN.
    but I have to modified your lib because i got error when i put element which was not transform by Tweenmax, so i have to put some thing like that:
    GreenProp.x = function (obj) {
    var t = (obj[0] === undefined)
    ? obj : obj[0];
    if (t._gsTransform == undefined)
    return 0;
    return t._gsTransform.x
    };

    May be it will help somebody
    Thank man again

    1. I’m glad you find this useful!

      And yes that’s a drawback hence the need to do something like:

      TweenMax.set(obj, {
      z:0
      });

      or similar before using GreenProp so that you ‘initialise’ (or create the _gsTransform object) that GreenProp can then access.

      Your solution is good but you could even put the above code into the GreenProp lib so that it always creates the _gsTransform object if it doesn’t exist and therefore always returns a GSAP transform value. See what I mean?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s