.get() or something equivalent to .set() for getting properties of an element

[noco]

I tween the x position of an element and later want to check the current x position and use it elsewhere in my code. In Flash you would have just checked theMC.x to get the property.

 

How would you do something like TweenMax.get(theElement, theProperty)?

 

If you tween a css property like 'marginTop' you can later check the new/current css of 'margin-top.'  But how would you do this for the special properties like 'x' in a cross browser way?

[Rodrigo]

Hi,

 

Well this will depend on a few factors.

 

If you're using JQuery or not and if you're animating css properties or not.

 

The thing is that if you're animating a css property and you're using JQuery you can use an onUpdate call in order to get that property using JQuery's css method, like this:

$(document).ready(function(){

var 	div1 = $("div#div1"),
	divLog1 = $("div#log1");

TweenMax.to(div1, 2, {top:400, left:400, onUpdate:updateFn});

function updateFn()
{
	divLog1.html(div1.css("top") + ' // ' + div1.css("left"));
}

});

Now if you're not using JQuery you can store the value in a variable and using it when you need it, like this:

var div1  = document.getElementById("div1"),
    div1Top,
    div1Left;

TweenMax.to(div1, 2, {top:400, left:400, onUpdate:updateFn, onUpdateParams:['{self}']});

function updateFn(tween)
{
    div1Top = tween.target.css.top;
    div1Left = tween.target.css.left;
}

And if you're not animating a css property, like x and y, but yuo're using JQuery, you can use something similar to the code above:

$(document).ready(function(){

var div1 = $("div#div1"),
    divLog = $("div#log"),
    div1Top,
    div1Left;

TweenMax.to(div1, 2, {y:400, x:400, onUpdate:updateFn, onUpdateParams:['{self}']});

function updateFn(tween)
{
    divLog.html(tween.target.y + '  //  ' + tween.target.x);
    div1Top = tween.target.y;
    div1Left = tween.target.x;
}

});

Why I mention this, because x, y, rotations, skews and others are, as far as I know, functions of a css property and the code to get them through JQuery's css method will be quite a chore, so it's a lot easier to let GSAP do the work for you, so you'll be getting the element's x and y as soon as is changed by the engine.

 

Hope this helps,

Cheers,

Rodrigo.

[GreenSock]

Secret tip: those transform-related values like x, y, rotation, skewX, scaleX, scaleY, etc. are all stored in a _gsTransform property that gets attached to the element itself. Keep in mind, however, that the rotational values (including skewX) are in radians, not degrees. So you could get those values anytime like this:

var transform = yourDOMElement._gsTransform,
    x = transform.x,
    y = transform.y,
    scaleX = transform.scaleX;
...etc.

As for other "normal" css-related properties, you can get those the normal way using the getComputedStyle() or use something like jQuery.