[framer-route-animation] window should not scroll to top immediately

[QzCurious]

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