Resetting scroll position during top-level "overlapping" page transition?

[mosesoak]

Our team at y'all uses Framer Motion extensively -- thank you for the excellent library!

We've used many advanced features but the one thing we haven't quite figured out, after lots of searching, is this problem:
when using AnimatePresence to run an "overlapping" transition effect, how do you deal with the case where the user is scrolled down?

Example: clicking on "C" transitions to a page that's scrolled down the same amount.

2022-11-12.13-02-02.mp4

This is just a pretty standard setup with a top-level <AnimatePresence> wrapping pages that set their content to position: absolute so they can overlap, plus some setting of z-indices on animate/exit. Framer pretty much handles the rest, which is awesome. ✨

Resetting scroll on click doesn't help, since that just shows the first page jump to top then transition. So what we need is a way to hold the first page in place while resetting scroll for the second page. After some engineering we've solved the problem using position: fixed and a negative top offset on the first page during scroll reset:

2022-11-12.13-06-42.mp4

I packaged this into a wrapper component and a (nextjs-router-based) React context that provides an isChangingPage state (since some pages will glitch when popped out of the scrollElement), and would be happy to share details on it. But in general this is the one place Framer Motion hasn't "just worked" for us, so I wanted to hear from the authors as to whether there's a standard way to pull this off? If not, happy to discuss how we could contribute!

Thanks!
Principal Engineer, https://itsyall.com

[mosesoak]

@mattgperry Hi! Framer is awesome, love it, thank you! Wanted to ping you on this to ask if it's already addressed somewhere, or whether it's new territory? Again, we could potentially contribute to a solution if not. (I figured a discussion would be less noisy than an issue for this topic.) Thanks again!

[jakubkanna]

I'm not an engineer but solved it with

    <AnimatePresence
      mode="wait"
      onExitComplete={() => {
        window.scrollTo({ top: 0, behavior: "instant" });
      }}
    >
    
    ...
    
    </AnimatePresence>

:)