Jump to content


Lag during new animation timeline added

Recommended Posts

Hey Guys ! I made a short demonstration of an issue what i experience when i need to create bigger amount of elements with animations on demand.

If you hit the "red" button "Add with Animation" you will see that the running animation lag for a while until the gsap timeline created and started.  

More elements come in game, bigger is the Lag. 
If you hit the "green button", it just adds 400 elements to the body without animating them. This has no effect on the animations at all.


If i see the performance monitor, i see there are a lot expensive "Recalculate Style" and "Layout" which force reflow.   

In our product we need to create animations on demand, which change their attributes, behaviour depending on user actions.   Since i can not "precalculate" things, is there a way which would somehow avoid this  lags ? Maybe an option which i overseen ?  


Hope you can help me out here ! Many Thanks !


See the Pen xxGpJMO by themepunch (@themepunch) on CodePen

Link to comment
Share on other sites

Guys, never mind ! Seems that the Lag comes due the attributes i "animating".

Layout/Reflow will be forced if we set following CSS Attributes:  https://gist.github.com/paulirish/5d52fb081b3570c81e3a  


I had position:absolute in the gsap animation which had massive influence on the preparation. Since i can not close myself, please mark this is closed. Sorry and thanks ! 



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