IanStews

This does the trick, thanks @OSUblake! Now I Just have to figure out how to cleanup the matchMedia function and the tweens. I think this post might help

I've been having this weird bug/ issue in combination with ScrollTrigger.matchMedia and resizing the browser in Gatsby. When resizing the items seem to get stuck in the pre-animation state (making them disappear). I would expect to see the blocks do their animations after a resize but instead I'm just seeing the start state and nothing else. **Note: This only happens when resizing the browser without any reloads. If you resize and reload it will animate according to the query.I've made a simple example for you guys to have a look at in CodeSandbox: https://codesandbox.io/s/gatsby-gsap-matchmedia-issue-l04x8

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.

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.

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