IanStews Posted October 7, 2021 Share Posted October 7, 2021 I've been having this weird bug/ issue in combination with ScrollTrigger and routing between different pages in Gatsby. When routing to a different page while clicking on a link the animation starts before the trigger is met. So when I scroll down and expect to see blocks animate in I see blocks already in their end state. **Note: This only happens when routing to a page. If you open a page and/or refresh this doesn't happen (the normal behaviour with ScrollTrigger happens). I've made a simple example for you guys to have a look at in CodeSandbox: https://codesandbox.io/s/gatsby-gsap-scrolltrigger-issue-q19r6?file=/src/pages/index.js Link to comment Share on other sites More sharing options...
Cassie Posted October 7, 2021 Share Posted October 7, 2021 Hey Ian, I can't replicate this - I'm also not sure what 'routing to a page' means - sorry, there's a lot of different frameworks out there! I pasted /page-2 in to the address bar and then clicked the 'back to homepage' link. In both these situations the animation works fine. Could you possibly detail the steps to create the issue? Link to comment Share on other sites More sharing options...
IanStews Posted October 7, 2021 Author Share Posted October 7, 2021 Hi Cassie, I should've clarified 'routing', sorry for that. The blocks on the homepage are links to page-2. When using these to 'route' to the page the issue appears for me. When putting the route in the address it doesn't happen. This matches the page refreshing behaviour. **Note: not sure if it's browser specific. I've been testing on safari technology preview. 1 Link to comment Share on other sites More sharing options...
OSUblake Posted October 7, 2021 Share Posted October 7, 2021 I see the problem, but CodeSandbox doesn't update when I change something, so it's hard to troubleshoot. I'm going to have to investigate this locally. Please standby. Thanks 1 Link to comment Share on other sites More sharing options...
Cassie Posted October 7, 2021 Share Posted October 7, 2021 Thanks Blake! 🥳 Link to comment Share on other sites More sharing options...
OSUblake Posted October 7, 2021 Share Posted October 7, 2021 Hi @IanStews It looks like the previous page gets unmounted after the next page's useLayoutEffect gets called, which is causing issues. When useLayoutEffect fires, it's at the previous page's scroll position which will play the animation, and the Gatsby resets the scroll position. So I would try this first. useLayoutEffect(() => { window.scrollTo(0, 0); ... }, []) If that doesn't work, you can try switching your useLayoutEffect over to a useEffect, although that can bring along other problems, like FOUC. 1 Link to comment Share on other sites More sharing options...
IanStews Posted October 8, 2021 Author Share Posted October 8, 2021 Hi @OSUblake, I'll give it a try. Hope I won't have to revert to useEffect, i moved away from that for the FOUC. 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