Laggy Animation on Load

[Deborah VdeV]

Hi,
My GSAP animations are really laggy on page load, I have previously worked around it by using an opacity of 0 to the items I was animating, but that doesn't seem like a great solution as that means my animated elements are all invisible hence not great to edit!

Is that normal, or am I missing something, none of the docs seem to be referencing this.
Thank you,
Deborah

See the Pen qBXGaXb by deborahvdev (@deborahvdev) on CodePen

[OSUblake]

Welcome to the forums @Deborah VdeV

 

The majority of that animation is done with Lottie, so that would be more of a Lottie issue than a gsap one. You could probably improve it some by waiting for DOM to load, waiting for the animation to load, and then fire the animation a little bit later. 

 

 

[Deborah VdeV]

Thanks @OSUblake, that example uses lottie, but I have had the same issue with images, where the image loads at the spot attributed by the page CSS, and the gsap animation kicks in a split second later, like in this example.
I have used DOM loaded events listeners, hidden the elements on load, etc... but thought I might be missing something as it seems to be quite a bit of workarounds

See this other pen>

See the Pen oNeRzVW by deborahvdev (@deborahvdev) on CodePen

When the page loads, all the elements are there, then gsap kicks in and makes them transparent/animates them

[OSUblake]

You're not missing anything. The initial page load just puts a lot of work on the browser. If you open the activity/performance monitor on your computer, you'll see the CPU spike when the page loads, which can cause any type of animation to lag a bit, not just GSAP.

 

[Deborah VdeV]

Thank you for your help @OSUblake, that's very good to know