A very newbie question: when 'x' works and 'left' does not.

[cerulean]

I am working with the HTML5 banner example from Greensock and started trying to do my own banner, commenting out most of the GS code, and have a very newbie (i.e., ahem, probably stupid) question: why will a simple animation from left to right (of a div or an image) work when I use 'x' and not 'left'?

 

I understand that 'x/y' uses transforms, and 'left/top' uses CSS, so I thought it might have something to do with the CSSPlugin not loading — so I tried it with TweenMax directly (which should include the plugin, right?)

TweenMax.to($monkey, 0.2, {left:400, rotation:30});

The rotation works, the lateral movement, no.

 

This does, however

TweenMax.to($monkey, 0.2, {x:400, rotation:30});

What's my obvious error?  Is there an init call to CSSPlugin I'm lacking? I compared the GS example and mine, but am missing it.

 

BTW, if I use TimeLineLite (or Max), is the CSSPlugin init'ed automatically?

[ektorp]

This is a recent duplicate issue as you can see below. Basically, setting the 'left' property requires setting it's 'position' property as well while using transforms such as 'x' do not require a 'position' setting.

 

Rodrigo sums it up pretty well:

 

http://greensock.com/forums/topic/12374-having-trouble-animating-a-jpg/