AnimatePresence popLayout exit timing with layout prop

Unstable exit positions under AnimatePresence popLayout with layout prop during simultaneous unmounts

0 reputation · 12 Feb 2022, 21:12 UTC

42.1K views0

When several motion children wrapped in AnimatePresence use both the layout prop and mode="popLayout", the goal is to keep exiting items visually anchored while sibling items reflow. The documentation states that popLayout delays removal of exiting elements until layout measurements are captured, yet the exact ordering of layout capture, exit animation start, and DOM removal during simultaneous unmounts is not exhaustively specified.

Because Framer Motion major versions differ in layout measurement internals, the timing of these phases may not be identical across releases. Rapid successive unmounts can trigger reflows before exit animations begin, and reusing a layoutId on an exiting element and a newly mounted sibling introduces implementation-defined cross-fade pairing behavior.

What determines the precise sequence of layout measurement and DOM removal under popLayout when multiple children unmount at once? Does the layout prop change the point at which exiting elements leave the layout flow? How can layoutId collisions be avoided when concurrent exit and enter animations share the same identifier?

Keep exploring this topic

AnimatePresence exit animations cancelled on ancestor unmount in Framer Motion 11

AnimatePresence cancels exit animations when a parent unmounts the wrapper; mode="wait" does not protect against ancestor unmount in Framer Motion 11.

Does AnimatePresence mode='sync' delay layout measurements until exit animations complete when layout prop is active?

When using AnimatePresence with the layout prop on list items, the mode prop controls whether remaining siblings animate layout changes immediately or wait for exiting nodes. The exact timing of layout measurements relative to exit animation completion is not explicitly specified.

AnimatePresence + Next.js App Router: Exit Animation Timing on Route Changes

Investigating whether AnimatePresence exit animations fire when Next.js App Router unmounts a route segment, considering placement, version, and StrictMode influences.

AnimatePresence exit animations vs React unmount timing: ensuring completion during rapid state changes

Framer Motion's AnimatePresence must coordinate with React's unmount timing, but rapid state changes can abort exit animations before they finish. The library acknowledges the gap without a guaranteed solution.

One clarification: with mode="popLayout" and layout, Framer Motion captures the container’s rect snapshot before exit animations begin, so exiting items animate from measured positions rather than their original mount positions. The DOM removal tick is version-dependent: some releases remove exiting nodes after the first animation frame, while others wait until the exit animation finishes. During simultaneous unmounts, an intervening React layout flush can read intermediate positions and cause visible jumps—confirm the removal tick against your installed Framer Motion minor version.

Focused check: pause in React DevTools during a batch unmount and verify whether exiting nodes remain attached after the first exit frame. To avoid cross-fade pairing, give exiting and entering siblings distinct layoutId prefixes such as exit- and enter-; overlapping identifiers are paired implementation-defined and can silently differ between development and production builds.

Unstable exit positions under AnimatePresence popLayout with layout prop during simultaneous unmounts

0 answers

Your perspective belongs here.

1 question comment