Next.js, Scrolltrigger doesn't work when navigate

[antonio iodice]

Hi, when I navigate in the another page, when I come back to home my scrolltrigger with split text doesn't work.

 

 

Link here: https://codesandbox.io/p/sandbox/elated-dan-hc2qcc?file=/app/page.tsx:26,31

[GSAP Helper]

Could you provide a minimal demo that clearly illustrates the issue? The one you provided doesn't seem to have any way to navigate anywhere, so we can't easily replicate the problem. 

 

Also, you forgot to add an empty array to your useEffect() dependencies Array. 

useEffect(() => {
  // code
}, []); // <-- IMPORTANT! Otherwise, it'll re-run on every render.

 

React Starter Stackblitz (please read this article!)

 

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. 

[antonio iodice]

I can't create the bug, the project link where it occurs is this.

 

Link:  https://portfolio-git-pluff-gaetanoromanox.vercel.app/

 

If you try to navigate, the animation does not start when you return to the home page.

 

[Rodrigo]

Hi,

 

There is not a lot we can do when it comes to live sites.

 

The only thing I can think of is that you are not reverting your animations when the page gets unmounted. You can use the cleanup function in the effect hooks to do that:

useLayoutEffect(() => {
  const ctx = gsap.context();
  return () => ctx.revert();
}, []);

Another possibility is that you are using page transitions, you need to know exactly when those are completed in order to create the ScrollTrigger instances. Have you tried setting markers to true in order to see where the markers are and, if the ScrollTrigger instances are being created at all?

 

We have this example using page transitions in Next:

https://stackblitz.com/edit/nextjs-13cw4u

 

Hopefully this helps.

Happy Tweening!