Jump to content
GreenSock

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

TweenMax tweening CSS: 'x' vs 'left'

Recommended Posts

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?)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

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