I need assistance resolving a routing issue with the Next.js GSAP scroll animation on my example.

[Fusion Journey]

 

 

We're using GSAP for animations, including Smoothscroll, ScrollTrigger, and TextSplit.The animations are based on image sequences displayed on a canvas using GSAP. However, when navigating from Page A to B and then back to A, the animation ceases to function. All the code is set up on the staging server. If you have expertise in Next.js with GSAP, I'd appreciate your help in resolving this issue.

 

https://stackblitz.com/~/github.com/kartarsinghdebugged/stackblitz-starters-backanimations

 

 

See the Pen stackblitz-starters-backanimations by ~ (@~) on CodePen

[Rodrigo]

Hi,

 

Unfortunately your demo is far from being minimal. We just don't have the time resources to comb through all that and find what could be the problem.

 

First of all in basically every component file in your components folder, you're not using the useGSAP hook. Even though you're manually cleaning up in the effect hooks, there are others where you're not cleaning up:

• heoMobile.jsx
• heroAni.jsx
• middleAnimation.jsx
• smoothScroller.jsx

We have this demo using ScrollSmoother and the useGSAP hook with routes:

https://stackblitz.com/edit/stackblitz-starters-cxedmc

 

Another thing I saw is that there are some layout shifts, probably when the images are finished loading. If you don't refresh ScrollTrigger, all the calculations are going to be off. Even better would be to create a preloader to create everything once all the images are loaded.

 

I would strongly recommend you to test a single component at a time in order to try to isolate which component(s) is(are) creating the problems.

 

Happy Tweening!

[Fusion Journey]

Thanks for your feedback. I have tried to use the useGSAP function for animation refresh. But issue is still there.
https://stackblitz.com/~/github.com/kartarsinghdebugged/stackblitz-starters-backanimations

Can you please help me to fix this.

 

[Rodrigo]

Sorry, but as I mentioned before we don't have the time resources to comb through all the code in all those files, trying to find and solve issues for you.

 

I saw that in a few components you're still not cleaning up, also I would recommend you to remove all the commented out code, that could lead to confusions and difficulties when trying to debug, that's why in git you can create branches in order to try different things.

 

As I mentioned before I strongly recommend you to start removing components from your page, in fact remove all of them and start adding them one at a time and check if that component works. Test each component alone and once all the components are working individually in the page start adding them to the page one by one, most likely at this point you'll have no issues.

 

Happy Tweening!