Jump to content


left/top vs x/y

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

Continue from http://forums.greensock.com/topic/7763-tell-tweenmax-to-uses-translate3d-instead-of-translatexy/

I think this topic deserves a separate post.



Jack mentioned that left/top perform better than x/y. Here's my issues:


1) css left/top will have [a] sub-pixel problem rendering (round-to-pixel) in most browser, so I choose to use x/y which will enable greensock to uses translate.

Please read:



Translate of multiple objects perform sometime perform worse than left/top. But sub-pixel problem is worse.


I test it on iOS, simply move large image (such as 1024x768) will allow you to see the problem with non-translate3d movement.



2) According to what you suggest, to enable hardware acceleration, does it means that I have to use left, top & z ? 



  css: {

    left: '500px',

    top: '30px'


  z: 0



Link to comment
Share on other sites

Good questions...

  1. Sub-pixel rendering can make things look "better" in some situations, and worse in others. Pixel rounding can be very beneficial sometimes, like when you have single-pixel lines in your artwork, sometimes they can look like they vibrate when using sub-pixel rendering (the line gets fuzzy when it's between pixels). Then again, pixel rounding can look less smooth at very low velocities because the line can appear to "jump" to the next row/column of pixels. And pixel rounding requires less calculations for the browser/GPU (all the pixels land exactly, no need to calculate which lines should be fuzzed/interpolated). So it's not an "always" or "never" thing in terms of which is better. Also keep in mind that the article you linked to from Paul Irish only looks at ONE object rendering, so that won't run into the video buffer memory limit issue. As you can clearly see from the demo at http://www.greensock.com/js/speed.html, animating top/left performs significantly better than translating x/y under heavy loads. My advice would be to try both in your particular scenario and see which one looks smoother. 
  2. No, setting z to 0 won't help you here - it must be non-zero in order to kick in the 3D rendering. Even 0.00001is ok. Or define a transformPerspective. 

Does that help clear things up?

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