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

[Chicarito]

so there's no actual fix to this, thats just the way it is?

 

[GSAP Helper]

Hi @Chicarito and welcome to the GSAP Forums!

 

Fix for what exactly? What issue are you having?

 

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅