Jump to content
GreenSock

Scriviante

ScrollSmoother and my Gatsby site error

Recommended Posts

Hey guys,

 

Loving the ScrollSmoother plugin. I'm implementing it on a client's Gatsby website and it works fine on the page it's being used on. When i change routes, it affects other implementations of ScrollTrigger and gsap on other pages. Here's an example.

 

Click on this page first, let it load and scroll around etc, then click over to the About Us link in the top menu. The first page has ScrollSmoother, the second doesn't. Instead the second has a horizontal scroll section built with ScrollTrigger. See how it doesn't pin properly? 

 

Now reload the About Us page. It should work fine.

 

Any ideas if this is something I am doing or is it a bug?

 

Thanks!

Link to comment
Share on other sites

First of all, cool effect! Looks like the one @Cassie did on her live stream. 

 

Second of all, thanks for being a Club GreenSock member! 🙌

 

To your question...

  1. Did you remember to .kill() the ScrollSmoother instance? 
  2. Did you remember to call ScrollTrigger.refresh() when your new content is fully loaded and the page is done with layout? ScrollTrigger automatically does that when the "load" event is fired on a web page, but my guess is that Gatsby is dynamically loading things on route, thus nothing triggers a .refresh() and the start/end positions don't get calculated properly. 
  • Like 1
Link to comment
Share on other sites

Ah fabulous, that did the trick! Thanks a lot for that.

 

Yep, the page is a dummy page to test out @Cassie's design and how it would work with video because the original looked so cool 👌🏼.

Link to comment
Share on other sites

  • 4 weeks later...

Hey @Cassie,

Rather than start a new topic, I think it makes more sense to continue this here. 

So I am building a new Gatsby site and trying to implement ScrollSmoother again. I'm running into a new bug and I'm not sure how to fix it. 

When a new page loads, ScrollSmoother seems to be integrated well and the ScrollTriggers are refreshed, however if you scroll down the page a bit, the first time you click on anything will cause a scroll back to top.

See more at https://duqemain.gatsbyjs.io/

I have attached a screenshot of my ScrollSmoother implementation. This file is imported into a Layout.js file which wraps the content of each page.

 

Not sure if this helps but it also happens every time when you are on the homepage and scroll down to the footer where there is a newsletter signup form. If you click into the input and then out of it again, it scrolls back to top...

 

Cheers!

Andrew

1124507815_ScreenShot2022-04-29at1_40_33pm.thumb.png.3dc2d85adc09c7d8d207f39b94b2ae19.png

 

Screen Shot 2022-04-29 at 8.05.08 am.png

Link to comment
Share on other sites

Hi @Scriviante

 

If you need help, please don't post live sites or code snippets. That's what CodeSandbox is for 😉

 

I'm not sure what you're encountering, but maybe this thread will help you out. It's next.js, but close enough.

 

 

Link to comment
Share on other sites

Hey @OSUblake, thanks for the reply :). 

 

Did you check it out at https://duqemain.gatsbyjs.io/? The main issue is that the scroll position resets every time you click an input (like the newsletter opt-in at the bottom) and then click out again. I have absolutely no idea why this might happen so I hoped you might have any clues.

 

I will endeavour to recreate it in codesandbox once I get some time but I have never used it before.

 

Cheers,

Andrew

 

Link to comment
Share on other sites

Yeah, I see the issue but I'm not sure why. That's why we like to have a minimal demo so we can test and experiment with issue.

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.
×