Shared layout animation uses stale snapshot when clicking items rapidly (wrong card origin during open/close animation)

[MaxVhanamane]

Description:

I’m using layoutId to animate cards into a fullscreen view.

When interacting at normal speed, everything works correctly:

Opening animates from the clicked card → fullscreen

Closing animates fullscreen → back to the correct card position

The animation always uses the correct origin and destination

However, when clicking different cards very quickly, the shared layout animation becomes incorrect:

The first click always opens from the correct card

But on rapid subsequent clicks:

The fullscreen animation may open from the wrong card position

Or closing may animate back to a card that was clicked several interactions earlier

The wrong origin is not always the immediately previous card ... sometimes it’s 2–3 cards earlier

This only happens during fast interactions.
At normal clicking speed, the animations behave correctly.

It seems like motion/react is using a stale layout snapshot when rapid state changes occur, causing shared layout transitions to pair with the wrong element.

what is going on here?

Expected behavior

Shared layout transitions should always animate from and back to the correct element, regardless of interaction speed.

animation-issue.mp4

[MaxVhanamane]

I fixed the issue... all I needed to do was add a key. When you use React and conditionally render a single component like this, you normally don’t need a key, but in this case you do. Because AnimatePresence delays the unmount, the component mounts and unmounts quickly, and React thinks it’s the same component being rendered in the same place. That’s why it was reusing the old layout dimensions and position.

<AnimatePresence>
  {showFullScreen && (
    <FullScreenCardView
      key={fullScreenCardData?.cardId}
      fullScreenCardData={fullScreenCardData}
      setShowFullScreen={setShowFullScreen}
      handleEditCardButtonClick={handleEditCardButtonClick}
      handleDelete={handleDelete}
      setShowScrollButtons={setShowScrollButtons}
      showScrollButtons={showScrollButtons}
      source="deck"
    />
  )}
</AnimatePresence>