remix-run
[framer-route-animation] window should not scroll to top immediately
The Problem
It's might be too rough to framer-route-animation example that it's not considering scroll-to-top behavior by <ScrollRestoration />.
https://github.com/remix-run/examples/assets/38932402/4d403dc5-cadc-40fe-bf31-1460266c3189
About the Causes
Virtually, window would be scrolled to top immediately by <ScrollRestoration /> after location changed. Since all content in html share the same window.scrollY. The scroll-to-top behavior and the animate-{outlet} are happening at same time.
I thought I can capture the end of first {outlet} exit animation by onAnimationComplete and only then "continue" to do scroll-to-top. But re-implementing <ScrollRestoration /> for this one means a lot to me. I may break something I don't even aware of.
We can use useBlocker to stop navigation and continue on onAnimationComplete. But it might not be ideal as:
Code
It's a modified version from framer-route-animation example.
The only relevant change is add padding to make page scrollable. I also apply a background for visualize the problem better.
codesandbox here: https://codesandbox.io/p/devbox/remix-example-framer-route-animation-bug-9npqvc?file=%2Fapp%2Froot.tsx%3A30%2C6
