Jump to content
Search Community

How to set css3 transform

nene test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.

  • Like 3
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.
×
×
  • Create New...