Jump to content
Search Community

ScrollTrigger Stop working while switching the routes in NextJS

SaifUllah test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hi GSAP Community. I've recently Joined the GreenSock Club. I'm working on my first GSAP Application and facing some issue with ScrollTrigger Animation, I'm using the next/router and every-time when I switch to new route and come back to old ones, the old ones ScrollTrigger Animation stop working. I've tried to kill the Animation but still having the issue.

 

Here's the Sandbox link https://codesandbox.io/s/icy-flower-cuf0jl?file=/pages/index.js

 

Having this warning in console as well: GSAP target undefined not found. https://greensock.com

 

I'm using the GSAP ScrollSmoother Plugin as well, could there be any page size calculation issue?

Link to comment
Share on other sites

When I open the app I'm getting an internal server error. The first thing I noticed is that in your Layout component you don't have a dependency array on the effect that generates the ScrollSmoother. Any time the layout re-renders, it will create a new ScrollSmoother that will inevitably cause problems.

Something with the CSB is causing tons of errors, making it difficult to debug. I don't see any other outright errors though.

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Yeah, I can't see anything either because of all the errors like "Module not found: Can't resolve '../styles/globals.css'"

 

The empty dependency array is definitely a React-related problem as @SteveS said. Once you can provide a minimal demo with at least the basic plumbing working, we'll do our best to take a peek and offer advice. Just beware that we're not NextJS/React experts by any means. 

 

Make sure you're calling ScrollTrigger.refresh() when your [new] content finishes loading/rendering on each reroute. 

Link to comment
Share on other sites

  • Solution

It looks like you you forgot to follow Steve's advice and put an empty dependency Array on your useEffect(), so that was getting called every render. 

 

Also, you weren't cleaning up your ScrollSmoother. Apparently Next.js re-fires that useEffect() when you return to the page. You never called .kill() on your original ScrollSmoother. Multiple ones were being created on every reroute there. 

 

useEffect(() => {
  let smoother = ScrollSmoother.create({
   ...
  });
  return () => smoother.kill(); // <- IMPORTANT!
}, []); // <- Also important (empty Array)

https://codesandbox.io/s/long-cherry-fpouf3?file=/components/Layout.js:386-854

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...