GSAP Setup for Next.js 13/14

[TheoInTech]

Context:

I usually setup my projects like this:

 

Where I have all the pages as Server components and the `<Animations />` as the only Client Component and has all of the animations.

I'm also wrapping the entire page in a `<ScrollSmoothProvider>` wrapper to apply the ScrollSmoother.

 

Which looks like this:

And the <Animations /> like this:

 

As you can see in my <Animations /> component, I'm having multiple scroll triggers that represents each section on my page.

 

Problems & Questions:

1. With this approach, I noticed that sometimes, it's lagging/laggy on mobile and some sections.

2. Is this the best approach?

3. I also tried using useGSAP() but I'm having an issue on speed and performance especially  when I have the scope.

 

I'd love to go on a 1-on-1 to really visit the code as this is how I've been setting up for multiple websites now and I'm not liking the performance at all.

[GSAP Helper]

Hm, it's rather difficult to troubleshoot without a minimal demo (like a Stackblitz), but a lot of performance problems boil down to how browsers and graphics rendering work. Performance is a DEEP topic, but here are some tips: 

1. Did you notice if performance is any better (or worse) if you set ScrollTrigger.normalizeScroll(true)?
2. Is performance significantly better if you remove ScrollSmoother completely from the equation? 
3. Try setting will-change: transform on the CSS of your moving elements. 
4. Make sure you're animating transforms (like x, y) instead of layout-affecting properties like top/left. 
5. Definitely avoid using CSS filters or things like blend modes. Those are crazy expensive for browsers to render.
6. 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. 
7. 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)
8. 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.
9. 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. 
10. 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.
11. 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" 

 

Here's a Stackblitz collection with starter templates you could fork: https://stackblitz.com/@GreenSockLearning/collections/gsap-nextjs-starters

 

I hope this helps!