ScrollSmoother NextJS Starter retains scroll position on page change

[akalex_x]

Hi, I copied the code for the ScrollSmoother demo for NextJS app folder into my project at https://alex-wand.vercel.app/ , but im having an issue when switching pages. The code seems to work fine right out of the box with the rest of my animations, however it seems like when I navigate to a different page the scroll position is retained vs starting from the top again. Is there a way to modify the demo code for that?

[Rodrigo]

Hi,

 

Sorry about the troubles, but is almost impossible for us to debug a live site. I checked the exact same example we have on Stackblitz, created a production build and ran it on my local machine and I can't replicate the issue.

 

Without a minimal demo that shows the issue the only advice I can offer is to use the clearScrollMemory method on every route change:

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.clearScrollMemory()

 

Another option is to tell ScrollSmoother to scroll to the top using the scrollTo method:

https://greensock.com/docs/v3/Plugins/ScrollSmoother/scrollTo()

 

Hopefully this helps.

Happy Tweening!

[akalex_x]

@Rodrigo Thanks for the reply, I thought the issue would happen on your demo as well so I didn't provide a minimal demo. However I went ahead and forked your minimal demo and indeed noticed that it worked fine on your demo. I looked into it deeper and found that this is actually a known issue with NextJS 13. https://github.com/vercel/next.js/issues/330

 

I am however not sure why it works fine on your demo, I tried multiple of the solutions on the thread but the following worked for me. I just added the window scroll to right before the rest of the ScrollSmoother code.

 

useIsomorphicLayoutEffect(() => {
window.scroll(0, 0);
ctx.current = gsap.context(() => {
smoother.current = ScrollSmoother.create({
smooth: 1,
effects: true,
});
});
return () => ctx.current.revert();
}, [pathname]);

 

[Rodrigo]

6 hours ago, akalex_x said:

I looked into it deeper and found that this is actually a known issue with NextJS 13. https://github.com/vercel/next.js/issues/330

Goodness, this issue has been there for over 5 years and NINE major versions:

 

Lots of hacks and trial-and-error in the link you provided...

 

7 hours ago, akalex_x said:

I am however not sure why it works fine on your demo

It could be related to the OS, I tested in the latest chrome and firefox on Ubuntu 20 & 22.

 

Is good to know that this is not related to GSAP and thanks for providing both the link and the solution.

Let us know if you have more questions.

Happy Tweening!

[Cassie]

NINE MAJOR VERSIONS. 

woah.