Gatsby ScrollTrigger problem when routing

[IanStews]

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

[Cassie]

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?

[IanStews]

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.

[OSUblake]

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

[Cassie]

Thanks Blake! 🥳

[OSUblake]

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.

 

[IanStews]

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.