Scroll Animation is Laggy

[shruti singh]

I have made my site on GSAP with many animations but ScrollTrigger library is not working and whole site is lagging TOO much, It gets stuck as soon as i Scroll even a bit

[GSAP Helper]

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. ✅

 

Also a lot of performance problems are down to how browsers and graphics rendering work. It's very difficult to troubleshoot blind and performance is a DEEP topic, but here are some tips: 

1. Try setting will-change: transform on the CSS of your moving elements. 
2. Make sure you're animating transforms (like x, y) instead of layout-affecting properties like top/left. 
3. Definitely avoid using CSS filters or things like blend modes. Those are crazy expensive for browsers to render.
4. Be very careful about using loading="lazy" on images because it forces the browser to load, process, rasterize and render images WHILE you're scrolling which is not good for performance. 
5. Make sure you're not doing things on scroll that'd actually change/animate the size of the page itself (like animating the height property of an element in the document flow)
6. Minimize the area of change. Imagine drawing a rectangle around the total area that pixels change on each tick - the bigger that rectangle, the harder it is on the browser to render. Again, this has nothing to do with GSAP - it's purely about graphics rendering in the browser. So be strategic about how you build your animations and try to keep the areas of change as small as you can.
7. If you're animating individual parts of SVG graphics, that can be expensive for the browser to render. SVGs have to fabricate every pixel dynamically using math. If it's a static SVG that you're just moving around (the whole thing), that's fine - the browser can rasterize it and just shove those pixels around...but if the guts of an SVG is changing, that's a very different story. 
8. data-lag is a rather expensive effect, FYI. Of course we optimize it as much as possible but the very nature of it is highly dynamic and requires a certain amount of processing to handle correctly.
9. I'd recommend strategically disabling certain effects/animations and then reload it on your laptop and just see what difference it makes (if any). 

Ultimately there's no silver bullet, like "enable this one property and magically make a super complex, graphics-heavy site run perfectly smoothly even on 8 year old phones" 

[shruti singh]

The code is working individually ( if only using scrollTrigger ) but with my actual website code is lagging ( it has many files so its difficult to upload all ). The site just glitches out and holds black screen for few sec then again comes back to second page ( Home page animation is lagging.

 

See the Pen bGJZrVB by _sukoon (@_sukoon) on CodePen

 

[Cassie]

One bit of advice would be to scale the video up to the large size with css and then scale down with GSAP.

But if it's working with ScrollTrigger in codepen and not on your own site that's a clue that something else (not GSAP) is the problem.

Maybe you're trying to run too much JS at the same time, maybe your images or video files are too large. There could be many reasons.

[Rodrigo]

Hi,

The video in your demo is over 130MB and it's dimensions are huge. As Cassie mentions rendering the video alone doesn't create any problems but together with other stuff, it can definitely become an issue.

 

If you want to create some type of particles moving background and you want excellent performance I'd recommend PIXI's particle container:

https://pixijs.com/8.x/examples/basic/particle-container

 

You can check this demos by @OSUblake

See the Pen BjNZYP by osublake (@osublake) on CodePen

 

See the Pen PjrbWq by osublake (@osublake) on CodePen

 

Happy Tweening!