Jump to content


Animating translate forces style redraw

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

I am using TweenMax to do a simple animation on slides, which looks like this:

TweenMax.to(slides, 1.2, {y: (-100 * slideNum) + '%', ease: Power1.easeInOut});


I can see in google dev tools that layout is invalidated and recalculated for each update when using this function, but the translate css property should not need to recalculate the layout but only use composition.




Is this a bug, a sideeffect to animation using js or just me misunderstanding the concept completely :)



Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.


Perhaps I'm missing something here but the code snippet in your post shouldn't trigger any layout calculations.


GSAP normally uses a translate for this cases (percentage based transformations) and a translate3D property for GPU acceleration which is later removed and replaced with a 2D matrix. I even made a test and the layout events are not related to GSAP, in fact the only layout operations is when GSAP uses the .getBoundingClientRect() method when the instance is instantiated.


Perhaps you could create a reduced case test that clearly demonstrates the issue or perhaps share some dev tools timeline data to see.



Finally, for percentage based transforms you can use xPercent and yPercent. Please take a look at the following blog entry:



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