Hydrogen Demo
I wanted to experiment with some fancy page transitions with Remix and while the new native view transitions API is really cool, Firefox (Safari at the time, too) is still holding out support so I needed a solution that would work cross-browser. Since Remix/Hydrogen doesn't make use of full page navigations I needed to transition the `Outlet` component with GSAP at the root of the app by listening to url pathname changes.
Animating page transitions is easier said than done
The first issue I encountered when trying to do a simple fade in/out is that the app would immediately switch out the `Outlet` to the new route and only back half of the animation would work. Trying to use the `useOutlet` hook to sidestep this behavior caused a different problem as the `loaderData` from the previous route would immediately become undefined during a transition and cause the app to error out.
My solution
Making use of the `useBlocker` hook in a way that it probably wasn't intended to be used, I completely blocked the navigation until the exit animation had finished and then triggered the navigation and enter animation for the new route. This seemed to work the way I wanted but I'm not confident it would be a viable solution for an actual production website. I haven't tested this to confirm but I think hijacking the navigation like this would probably screw with webcrawlers and screenreaders. It definitely looks cool though, click on the image above and check it out!