Nextjs Gsap ScrollTrigger snapping not working about gsap HOT 3 CLOSED

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

from gsap.

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.

from gsap.

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

from gsap.