Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
IanStews

Gatsby ScrollTrigger problem when routing

Recommended Posts

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

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

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.

  • Like 1
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

Thanks Blake! 🥳

Link to comment
Share on other sites

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.

 

  • Like 1
Link to comment
Share on other sites

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

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