RJWadley Posted May 3, 2022 Share Posted May 3, 2022 So I'm using Gatsby with ScrollSmoother, and the first time you click the page, it instantly scrolls to the top (without any easing). This only happens on the very first click after loading the page. Does anybody have any insight into why this might be happening? I've created a minimal demo of the issue at: https://codesandbox.io/s/beautiful-wind-yn4yyt?file=/src/components/Scroll.tsx To reproduce: Reload the page Scroll down a bit Click anywhere (any mouse button) Link to comment Share on other sites More sharing options...
OSUblake Posted May 3, 2022 Share Posted May 3, 2022 Welcome to the forums @RJWadley I haven't seen that before, and Gatsby is acting up for me on CodeSandbox. React frameworks that do SSR on CodeSandbox are just buggy sometimes. Can you try to make a simplified version of that using only React so we can at least narrow it down to React or Gatsby? And maybe also test out using version 17 of React. Thanks! Link to comment Share on other sites More sharing options...
Solution RJWadley Posted May 4, 2022 Author Solution Share Posted May 4, 2022 I was easily able to reproduce the issue with React 17, although I wasn't able to recreate it using only React. And although I wasn't able to determine any causes, I was able to find a solution. I'll drop it here in case anybody encounters the same issue. I discovered that the issue only occurs if I explicitly create a smooth-wrapper and smooth-content like so: () => { SmoothScroller.create() //this doesn't work return ( <div id="smooth-wrapper"> <div id="smooth-content">{children}</div> </div> // ); //if I remove the explicitly created wrappers, this would work fine //but we would lose control of fixed elements (since they'd no longer be outside the wrapper) return children; } To fix the issue, I moved the ScrollSmoother.create() into gatsby-browser while leaving the smooth-wrapper and smooth-content in place. This fixes the jumping while retaining control of fixed elements, however the scroller won't always be up-to-date with the wrapper and therefore sometimes just won't scroll. This can be resolved pretty easily by adding a useEffect that refreshes the scroller anytime the scroll component updates. That leaves the final solution as follows: //in gatsby-browser SmoothScroller.create() //in Scroll component () => { useEffect(() => { SmoothScroller.get().refresh() }) return ( <div id="smooth-wrapper"> <div id="smooth-content">{children}</div> </div> // ); } Link to comment Share on other sites More sharing options...
OSUblake Posted May 4, 2022 Share Posted May 4, 2022 Oh, I think I see the problem now. Gatsby is wrapping everything in a focusable element. That is why I recommended to try it without Gatsby to make it easier to narrow the problem down. https://github.com/gatsbyjs/gatsby/issues/7310 So now I can reproduce the issue in vanilla html. We'll need to investigate if this is something ScrollSmoother can resolve. See the Pen KKQpROm by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted May 5, 2022 Share Posted May 5, 2022 I've applied a workaround for that edge case in the next release which you can preview (on CodePen/CodeSandbox) at https://assets.codepen.io/16327/ScrollSmoother.min.js Better? Thanks for reporting it. 1 Link to comment Share on other sites More sharing options...
Damian Hutter Posted May 16, 2022 Share Posted May 16, 2022 Hi there! Encountered the same issue and just wanted to ask when the workaround will be rolled out. For me it's only happening on a right mouse click tho. Best, Link to comment Share on other sites More sharing options...
GreenSock Posted May 16, 2022 Share Posted May 16, 2022 We're still working on several enhancements, so I cannot give you a specific date, sorry. However, I'd be happy to send you the unprotected beta file if you need that for your project - just Direct Message me. 1 Link to comment Share on other sites More sharing options...
Damian Hutter Posted May 17, 2022 Share Posted May 17, 2022 Awesome! Thanks a lot. I also tried around targeting the gatsby wrapper directly but it might cause some other issues down the road. So happy to include the beta file into the project. I've sent you a message. React.useLayoutEffect(() => { ScrollSmoother.create({ wrapper: '#gatsby-focus-wrapper', content: '#smooth-content', smooth: 1 }); }, []); 1 1 Link to comment Share on other sites More sharing options...
adamatronix Posted July 25, 2022 Share Posted July 25, 2022 I'm also having the same issue with Gatsby. Seems Damian's solution works, but dont know what the ramifications are of doing it this way. Was the fix ever deployed? Link to comment Share on other sites More sharing options...
RJWadley Posted July 25, 2022 Author Share Posted July 25, 2022 As of now the fix hasn't been deployed. It'll be in the next version of GSAP, most likely either 3.10.5 or 3.11.0 If you can, it's easiest to just wait for the update. If that's not an option, I'd say either use the beta files or Damian's solution. As a temporary measure either should be fine. 2 1 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