Jump to content
GreenSock

null

ScrollSmoother in Next.js breaks ScrollTrigger upon page navigation from ScrollSmoother page to non ScrollSmoother page

Recommended Posts

Hi guys. 

 

Here is a minimal demo.  Clone it or download the .zip and place the Club Greensock gsap-bonus.tgz at the root and do npm install(as described here).

 

Then run npm run dev to run it.

 

Scroll down and see how there is a Scrolltrigger animation on the navbar.

 

Then, navigate to the page titled "parallax".  This page has ScrollSmoother on it.  The navbar ScrollTrigger animation does still work on this page.

 

Now, navigate to another page.  The ScrollScrolltrigger navbar animation is broken.

 

Then navigate to another page and it works again!

 

I have been troubleshooting this for a whole day and I cannot figure it out.

 

Can anyone help me?

 

If anyone knows how I can use ScrollSmoother plugin in a Codesandbox without exposing my Club Greensock .zip then I can create a Codesandbox demo so you don't have to install the npm packages locally.

 

Thank you in advance.

 

P.S. Scrollsmoother (and ScrollTrigger and all of GSAP) is AWESOME!

Link to comment
Share on other sites

Blake, thank you for the CodeSandbox ScrollSmoother starter project!   That is more helpful than I can express in words.

 

I will now begin porting my demo into a fork of it.

  • Like 2
Link to comment
Share on other sites

Blake, your CodeSandbox starter is awesome and works fantastic.

 

But I must be using CodeSandbox wrong because every time I add anything it breaks with an "Internal Server Error".

 

It is not just when I add something to your CodeSandbox.  This error happens with every single CodeSandbox I try to use.

 

I have tried dozens over the last several days and I always get this error.

 

CodeSandbox is really neat and I really really want to be able to use it.

 

Can you please watch this video I recorded that shows me running into the error and let me know what I am doing wrong?

 

Thank you very much for the help.

Link to comment
Share on other sites

Hm... I'm not sure about. When CodeSandbox, I usually click the Restart Sandbox and Restart Server buttons, and that usually fixes it.

 

image.png

 

@Cassie do know anyone who might be able to help with this?

 

Link to comment
Share on other sites

Wow, i did not realize that server icon was there on the side.  I was just refreshing the simulated browser and also refreshing the actual webpage and it did not fix the error even when I reverted back to the original working code.

 

That appears to have solved the issue!

 

One issue down.  Now I will port in my demo into the codesandbox.  :)

  • Like 2
Link to comment
Share on other sites

@OSUblake

 

Here is the CodeSandbox.

 

Scroll down to see the ScrollTrigger animation on the navbar.

 

Then navigate to another page through the links in the navbar.

 

Then navigate back to the homepage and note that the ScrollSmoother is broken.

 

Are you able to edit the codesandbox?

 

 

Link to comment
Share on other sites

Yeah, I can edit it. I think one of the issues is that that nesting needs to be different, kind like this.

 

<div id="smooth-wrapper">
          <div id="smooth-content">
            <PageTransition route={router.asPath}>
              <Component {...pageProps} />
            </PageTransition>
          </div>
        </div>

 

And we need to kill some ScrollTriggers and effects when navigating to a new page. We also need to refresh ScrollSmoother on new routes. I just put it inside a timeout for now. How would I go about calling ScrollTrigger.refresh() at the end of the page transition?

 

It's looking better, but there are still issues with it, like that black area when you scroll down. Is that part of the wipe?

 

https://codesandbox.io/s/gsap-scrollsmoother-next-js-starter-forked-demo-459fmr?file=/pages/_app.js

 

I'm going to tinker around with make a ScrollSmoother component similar to what I did with this nuxt.js one. 

 

 

 

  • Like 2
Link to comment
Share on other sites

@OSUblake

 

Thank you for your help.  With your guidance we FINALLY got it working!!! :)

 

You were right, I needed to refresh the Scrolltrigger when the animation going into the next page is done - or at least refresh once the next page is visible.

 

Here is the demo.

 

The coolest part is that I now know how to use ScrollSmoother inside CodeSandbox!

 

Thank you very very very much.

 

  • Like 3
Link to comment
Share on other sites

Love your enthusiasm Null. It's really nice to help people who take the time to spread some joy and appreciation! 

Pop back here anytime.

  • Like 3
Link to comment
Share on other sites

Hey @null and @OSUblake.
Thanks a bunch for figuring this out. I am currently in the research phase for a new project we kicked off yesterday.
Your example basically answered all of my open questions for solving animation and page transitions in next.

I gotta say it really feels good seeing an engaged community and support team working together to create awesome projects.
Kinda forgot how that felt. Totally worth the money.

Thanks a lot!

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

For anyone passing by in the future.

There is a minor issue with the CodeSandbox example, where the "Jump to C" button stops working after navigating to a different route and back.
Calling the refresh() method of ScrollTrigger when executing the scrollTo callback fixes this.
I don't know if this is the best solution since I am a newbie myself.
Maybe @OSUblake is able to confirm this?
 

pages/index.js L:26

function scrollTo() {
  ScrollTrigger.refresh();
  smoother && smoother.scrollTo(boxC.current, true, "center center");
}


Happy coding, chimp

  • Like 1
Link to comment
Share on other sites

2 hours ago, chimp1nski said:

Calling the refresh() method of ScrollTrigger when executing the scrollTo callback fixes this.
I don't know if this is the best solution since I am a newbie myself.

 

Yep, that's what I mentioned above.

 

On 4/21/2022 at 5:04 PM, OSUblake said:

And we need to kill some ScrollTriggers and effects when navigating to a new page. We also need to refresh ScrollSmoother on new routes.

 

  • Like 1
Link to comment
Share on other sites

Nvm, I forked the "final demo" from null which is missing the cleanup you provided in your example.
Unforunately the sandbox you provided in the post you mentioned threw a runtime exception switching routes as well (smoother instance in the cleanup was undefined).

I think I fixed in this fork. Or at least it's a demo that works (for me) as intended (I guess).
GSAP ScrollSmoother + Next.js (starter) (forked) - DEMO - CodeSandbox

I am not too sure if this is the correct way to use gsap with Next / React but I searched far and wide to find a starter project / post about best-practices and this thread is the closest I could get.

  • Like 1
Link to comment
Share on other sites

If you're looking for the basics of using React with GSAP, we do have a guide.

 

 

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

Oh man I am starting to feel like one of those guys that somehow isn't able to browse the docs correctly and just asks questions that have already been answered years ago 😬

I'm truly sorry for that @OSUblake I really hope your not too annoyed of me already :D 

  • Like 3
Link to comment
Share on other sites

Not at all. It's on us to surface the things better - working on it!

  • Like 2
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.
×