search

MaggieAppleton / maggieappleton.com

⚠️ Now retired. My previous, poorly constructed digital garden built with Gatsby and MDX. Updated garden here: https://github.com/MaggieAppleton/maggieappleton.com-V2
https://maggieappleton.com
Other
162 stars 23 forks source link

Greensock not loading on first load in MDX Posts #105

Open MaggieAppleton opened 3 years ago

MaggieAppleton commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

Fixed by #122?

MaggieAppleton commented 3 years ago

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.