layoutScroll doesn't work with shared layout animations

[jamesvclements]

Update 5/26/23:

I recreated the issue here: https://w7hjcz-3000.csb.app/about, here's the CodeSandbox.

It turns out that the issue was using <AnimatePresence> and variants on the shared layout element, not layoutScroll or layoutRoot. So this works, when combined with layoutScroll on the fixed element:

{isInView && (
  <motion.div
    layoutId="subnav-highlight"
    className="subnav__highlight"
    ...

But this does not work:

{isInView && (
  <motion.div
    layoutId="subnav-highlight"
    className="subnav__highlight"
    initial="hidden"
    animate="visible"
    exit="hidden"
    variants={{
      hidden: {
        opacity: 0,
        scale: 0.95,
      },
      visible: {
        opacity: 1,
        scale: 1,
      },
    }}

and creates the jumpiness you see here:

I solved it by just removing those variants, the enter / exit animation wasn't that important for my design, but there probably is a real solve to get this working with shared layout animations and layoutScroll.

Original Post

My site has a nav and island, both position: fixed to the top of the screen:

Both components are part of the root layout.tsx, so they're shared across pages.

I can't find a way to get layoutScroll and layoutRoot to work together, so that:

1. The island stays in place between route changes when you're scrolled down the page and click a nav link
2. The subnav highlight only animates X, and not Y from some offscreen vaue

Here's a video of what happens without layoutScroll: https://share.cleanshot.com/47PdNddx

The island bounces all over between page changes.

Here's a video of what happens with layoutScroll: https://share.cleanshot.com/fdHQ7xGy

The island stays in place, but the subnav highlight animates from some "y" value that doesn't make sense, instead of only animating the "x" as it does in the first video.

Is it possible to have both? Thanks!

[mikirejf]

It would be helpful if you could provide a codesandbox where the issue can be reproduced.

[jamesvclements]

@mikirejf yep I'll try, need to reproduce a minimal multi-page next.js with app dir to replicate

[jamesvclements]

@mikirejf added a code sandbox and more details!

[jakobprufer]

Having the same issue, have you found a solution?

[ShacharHarshuv]

I have a similar issues only I didn't do any of the things the post said were the culprit. My "highlight" element doesn't have animation presence or any enter/exit animations or variants. What else could be causing this?