[framer-route-animation] window should not scroll to top immediately #444
Description
The Problem
It's might be too rough to framer-route-animation example that it's not considering scroll-to-top behavior by <ScrollRestoration />.
bandicam.2024-03-13.10-07-49-128.mp4
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