Better solution for forced reflow timeline animations?

[Maglr.com]

Customers are using our platform to create interactive magazines. Inside our editor they have the option to create all sorts of designs with animations using GSAP (version 2.1 at the moment) in the back-end. Example: https://magazine.vanoord.com/en_US/18338/ 

 

These pages are presented in a publication interface.  A visitor can click through a publication page by page. We are preloading these pages, adding these to the DOM and initialising the specific animations used on that page. 

 

We are busy changing our platform set-up, because of these changes we are now encountering more visible problems with reflows created by the initialisation of the animation timelines. 

 

Attached a screenshot of the Chrome performance test. The red marks show 'forced reflow' problems. We are known what is causing a reflow, but are there any best practices, next to updating to version 3,  how these scenarios can be improved with GSAP? 

 

Thank you.

 

 

[ZachSaucier]

Hey Maglr and welcome to the GreenSock forums. Thanks for being a Business Green member! We couldn't do what we do without people like you.

 

There's no magic bullet to fix these issues. The best thing you can do is ensure that you are only animating properties that don't cause reflow. For example using transforms instead of width/height/top/left. It's pretty hard for us to help without seeing a minimal version where we can play around with the code ourselves (preferably in something like a CodePen). 

[Delphine]

I have the same problem and after reading this post, I would like to find this link: https://greensock.com/fouc which may be a clue 😉