Lag during new animation timeline added

[themepunch 61 Likes (Contributor)]

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

[themepunch 61 Likes (Contributor)]

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 !