TweenMax tweening CSS: 'x' vs 'left'

[cerulean]

As an erstwhile AS3 developer moving over to some JS, could someone clarify this for me?

 

I was trying to move a div on screen and then (when invisible) set it back to where it started.

 

Something like this (swapOut is a JQuery object):

 

 

TweenMax.to(swapOut,0.4,{css:{x,opacity:0},onComplete:this.finishSwapImages,onCompleteParams:[swapOut,swapOut.css('x')]});

 

But I could never get it set back where I wanted? See the obvious error: I'm using 'x' instead of 'left'. When I inspected in Firebug I saw that my div's css had a transform-matrix set on it.

 

When I went back and did this, all worked fine

 

TweenMax.to(swapOut,0.4,{css:{left,opacity:0},onComplete:this.finishSwapImages,onCompleteParams:[swapOut,swapOut.css('left')]});

 

My question is: what's TweenMax doing for me with respect to x? Is this a proper CSS property? — or is TweenMax lending a helpful hand for us AS3 people and moving stuff in a tricky way when we (mistakenly) say 'x'? If so, what else is like this in the JS version? ("y" -> "top", etc?)

[Carl]

Hi,

 

x and y aren't typical css properties like width, height, background-color, color etc. When you are specifying x/y in your tween you are telling the CSSPlugin to affect the element's transform property. http://www.w3schools.com/cssref/css3_pr_transform.asp

 

We have found that is sometimes slightly more efficient to tween the css properties 'top' and 'left' instead.

[GreenSock]

Carl is exactly right, and to be clear, "x" and "y" are the same as "translateX()" and "translateY()" in the "transform" css property.