[Gatsby matchMedia makes items "disappear"]

On 11/25/2021 at 5:40 PM, OSUblake said:

ScrollTrigger.saveStyles()

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 

 

[Gatsby matchMedia makes items "disappear"]

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

[Gatsby ScrollTrigger problem when routing]

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.

[Gatsby ScrollTrigger problem when routing]

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.

[Gatsby ScrollTrigger problem when routing]

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