Jump to content
Search Community

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

Ginger Soul
Posted

Hello, 

 

I've searched around but I'm not seeing a comprehensive list of how GSAP needs CSS3 properties formatted for tweens. 

 

In other words - let's say that I want to move an item 100px on the X axis, like so (unprefixed):

 

transform: translate(100px, 0px);

 

I think the answer is something like transformX:[value] within the context of a tween. But where is this in the documentation? The 'goodies' article states that these transforms are possible, but it doesn't go into much detail about how to implement individual properties.

 

I feel like I'm missing something obvious. In that case, please smack me with the correct answer and I'll go away :)

 

Thanks

 

DB 

Posted

You will find more info on this in the CSSPlugin docs.

It is not a conclusive list of all CSS3 props though.

 

For what you want to do the solution is very simple

//animate to translateX of 100
TweenLite.to(elem, 1, {x:100});

CSSPlugin will handle all the browser-prefixes for you.

Ginger Soul
Posted

Very helpful, and thanks for the quick reply.

 

I feel like these properties would be a helpful add-on to the documentation (or, at least, the article I linked). Please consider adding it.

 

Thanks!

 

DB 

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...