Greensock not loading on first load in MDX Posts

[MaggieAppleton]

I have a few MDX components that use the greensock animation library. The animations are all written inside React components and then passed to the MDX files. They use greensock's 'scrolltrigger' plugin to fire - meaning the animation plays once the page scrolls to a certain point (eg. 20% of the way down).

If you visit any page like https://maggieappleton.com/garden, then navigate to the post called "The Bare Essentials of Greensock" and start scrolling you'll see that nothing animates

However, if you refresh the page and scroll, all the animations work perfectly. No clue why. Something with the way the MDX is rendering? Greensock isn't loaded when the page loads?

To add more intrigue, if you navigate directly to the page without going to another page on the site first, the animations all work. Perhaps something with routing or page transitions is getting in the way?

[MaggieAppleton]

Here's an example of the greensock js not firing on https://maggieappleton.com/greensock-react

https://user-images.githubusercontent.com/5599295/103475679-5a03ae80-4da7-11eb-9fa3-2fc746c0c7c7.mov

[texastoland]

Great steps to reproduce! This looks distinct from #72. It's specific to the interaction between ScrollTrigger (as opposed to GSAP in general) and Gatsby <Link/>. I'm not especially familiar with either so I'll save it for last.

[texastoland]

Fixed by #122?

[MaggieAppleton]

This one sadly wasn't solved with #122 - I think there's some issue going on with greensock not being called. It works if you directly nav to the page, but not if you navigate there through another page on the site. Hitting refresh on the page gets the animations to play.