SaifUllah Posted June 23, 2022 Share Posted June 23, 2022 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 More sharing options...
SteveS Posted June 24, 2022 Share Posted June 24, 2022 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. 1 1 Link to comment Share on other sites More sharing options...
GreenSock Posted June 24, 2022 Share Posted June 24, 2022 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 More sharing options...
SaifUllah Posted June 24, 2022 Author Share Posted June 24, 2022 Hi, Thank you for you response, I'm sorry for the inconvenience. I'm not very familiar with Codepen and I think it doesn't have NextJS environment. Anyways, I've fixed the CSB Issues, please re-check the link below and let me know how I can solve this issue. Thanks. https://codesandbox.io/s/pedantic-haze-j41gfp?file=/pages/index.js Link to comment Share on other sites More sharing options...
Solution GreenSock Posted June 24, 2022 Solution Share Posted June 24, 2022 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 1 1 Link to comment Share on other sites More sharing options...
SaifUllah Posted June 24, 2022 Author Share Posted June 24, 2022 Okay, Got it, I haven't killed the ScrollSmoother, Everything is working fine now, Thank you very much @SteveS & @GreenSock for your kind support. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now