Nextjs Gsap ScrollTrigger snapping not working

[Jean-Francois Zouba]

Nextjs Gsap ScrollTrigger snapping not working

Issue Description:

Problem Summary:

GSAP ScrollTrigger snapping functionality doesn't work in a Next.js environment, although it works fine in a bare HTML/CSS/JS setup.

Environment:

• Next.js version: ^14.1.0
• GSAP version: ^3.12.5
• GSAP react (@gsap/react): ^2.1.0

Reproducible Steps:

1. Open the provided Codepen example.
2. Open the provided CodeSandbox Next.js example.
3. Observe that GSAP ScrollTrigger snapping functionality work perfectly fine in CodePen example
4. Observe that GSAP ScrollTrigger snapping functionality doesn't work in CodeSandbox example
5. Compare with the provided CodePen bare HTML/CSS/JS example where the snapping functionality works correctly.

Additional Details:

• No error in console

Code Samples / Sandbox Links:

• CodeSandbox Next.js Example
• CodePen bare HTML/CSS/JS Example

[Jack Doyle]

Your CodeSandbox wouldn't even open for me, but I think I see what's going on - I created this Stackblitz instead:
https://stackblitz.com/edit/stackblitz-starters-p1ycqi?file=app%2Fpage.tsx,app%2Flayout.tsx

I think the fundamental problem is that you're technically using two different gsap objects - one module-based one that useGSAP() imports, and then a UMD one that Next.js defaults to using since it doesn't use modules by default (if I remember correctly - I'm not a Next.js guy). So the key is to make sure you gsap.registerPlugin(useGSAP, ScrollTrigger) BEFORE you use either one of those so that the useGSAP() is linked to the same gsap object as the rest of your stuff is using.

And Next.js complains about "style" being added to the (even though the style attribute is empty), thus you may need to clear it out right after registering:

gsap.registerPlugin(useGSAP, ScrollTrigger);
if (typeof document !== 'undefined') { // to avoid Next.js complaining
  document.body.setAttribute('style', ''); 
  document.body.removeAttribute('style');
}

It seems to work in that Stackblitz, right? Sorry about any confusion there. It's a very particular edge case where you're importing 2 different gsap objects and not registering them before using them.

[Jean-Francois Zouba]

Your CodeSandbox wouldn't even open for me, but I think I see what's going on - I created this Stackblitz instead: https://stackblitz.com/edit/stackblitz-starters-p1ycqi?file=app%2Fpage.tsx,app%2Flayout.tsx

I think the fundamental problem is that you're technically using two different gsap objects - one module-based one that useGSAP() imports, and then a UMD one that Next.js defaults to using since it doesn't use modules by default (if I remember correctly - I'm not a Next.js guy). So the key is to make sure you gsap.registerPlugin(useGSAP, ScrollTrigger) BEFORE you use either one of those so that the useGSAP() is linked to the same gsap object as the rest of your stuff is using.

And Next.js complains about "style" being added to the (even though the style attribute is empty), thus you may need to clear it out right after registering:

gsap.registerPlugin(useGSAP, ScrollTrigger);
if (typeof document !== 'undefined') { // to avoid Next.js complaining
  document.body.setAttribute('style', ''); 
  document.body.removeAttribute('style');
}

It seems to work in that Stackblitz, right? Sorry about any confusion there. It's a very particular edge case where you're importing 2 different gsap objects and not registering them before using them.

Thank you. Your advices worked nice. To think that I missed such an important detail.... Since it worked fine in CodePen I was wondering if NextJS was the problem here but it appeared it was me who hadn't registered the two objets before using them. Many thanks to you GSAP' guy.

Happy tweening

[Jack Doyle]

Excellent! Glad it worked out. Thanks for letting us know.