How to set css3 transform

[nene]

Hi! dealing with css3 transforms, how do I apply this?

 

tl.to(b,1,{css:{transform:"translateY(1000)",opacity:0},onComplete:function(){alert('END!');}},10);

 

translateY(N) not works

[Rodrigo]

Hi and welcome to the forums.

 

Basically is a syntax issue, you'll see the engine uses a more simplified syntax in order to reduce the amount of code.

 

In order to function properly your code would be like this:

tl.to(b,1,{css:{y:1000,opacity:0},onComplete:function(){alert('END!');}},10);

In the case of translate properties the equivalence is:

• translateY -> y
• translateX -> x
• translateZ -> z

For rotations:

• rotateX -> rotationX
• rotateY -> rotationY
• rotateZ -> rotationZ

For a simple 2D rotation -> rotation.

 

In the CSSPlugin docs you'll find the syntax in use:

http://api.greensock.com/js/com/greensock/plugins/CSSPlugin.html

 

Also take a look at the jump start for the JS version of the engine in order to get a better grasp of how it works:

http://www.greensock.com/jump-start-js/

 

Hope this helps,

Cheers,

Rodrigo.

[nene]

OK, Thanks a lot! ...it works. I'll revise this links