Jump to content
Search Community

Is left:100% slower than x:500px?

am_ test
Moderator Tag

Go to solution Solved by Jonathan,

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

  • Solution

Hello am_, and Welcome to the GreenSock forum!

 

Any of the CSS position offsets (top, right, bottom, and left) will always be slower and less smooth than the CSS transforms x and y.

 

The CSS position offsets (top, right, bottom, and left) will trigger layout and not animate on a sub-pixel level, CSS transform which animate on a sub-pixel level for a nice smooth butter churn. CSS position offsets will cause the geometry to change on the page and that will cause some major jank and or choppy animations.

 

Check out these 2 articles:

 

By GreenSock's Jack:

https://css-tricks.com/myth-busting-css-animations-vs-javascript/

 

And this one by Paul Irish:

http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

 

Also see this website and you can see what CSS properties trigger layout, which will trigger repainting, and compositing.

 

http://csstriggers.com/

 

x and y is always better than top and left for animating.

 

But you can still use position offsets for your initial position on load, but when changing that elements position, it is better to use transforms, when animating!

 

:)

  • Like 6
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...