Route change on a scrolled window causes jump in layout animation

[alexsafayan]

In client side route changes, the router automatically scrolls the window to the top. That forced scroll repositioning moves the outgoing content in the viewport, so Framer Motion begins its animation from a suddenly shifted layout. The result is a visible jump.

Here's an example with Next.js App Router

Does anyone have any tips?

Related:

• [BUG] - broken layoutId animation with Next.js page change and scroll #2006

[MILLERMARRU]

The jump happens because of a timing collision, not a Motion bug. Next.js App Router scrolls the window to the top on navigation, and Motion's layout system snapshots your outgoing element's position, then measures again after the DOM updates, to compute the FLIP delta. If AnimatePresence has already taken the exiting element out of normal flow (which it does for layout animations, typically via absolute positioning relative to its nearest positioned ancestor) and the page scroll changes between those two measurements, the delta ends up wrong because the exiting element is now positioned relative to a viewport that moved out from under it.

Two documented props are relevant here. layoutRoot exists specifically to account for page scroll when an element uses fixed positioning during layout animations, and layoutScroll is for scrollable ancestor containers. Since your case is the window scrolling on route change rather than a scrollable div, the practical fix most people land on is decoupling the transitioning page from document scroll entirely: wrap the page content in a position: fixed; inset: 0 container for the duration of the transition (so it's anchored to the viewport regardless of what the router does to scrollTop) and mark that wrapper with layoutRoot so Motion's projection system accounts for it correctly.

<motion.div layoutRoot style={{ position: "fixed", inset: 0 }}>
  <AnimatePresence mode="popLayout">
    <motion.div key={pathname} initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
      {children}
    </motion.div>
  </AnimatePresence>
</motion.div>

Combine that with suppressing the router's own scroll reset during the transition (router.push(href, { scroll: false }), or <Link scroll={false}>), and restoring scroll yourself once the exit animation finishes if you actually want the new page to land at the top. That removes the race entirely instead of trying to out-time it.