Does AnimatePresence mode='sync' delay layout measurements until exit animations complete when layout prop is active?
0 reputation · 20 Jul 2022, 18:20 UTC
Context
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 documentation describes popLayout and sync as common settings, but the exact timing of layout measurements relative to exit animation completion is not explicitly specified.
Goal
Determine whether mode="sync" guarantees that layout measurements for remaining items are deferred until all exit animations finish, preventing intermediate layout shifts during the exit phase.
Constraints
- Framer Motion v10+ changed layout animation behavior significantly; older examples may not reflect current semantics.
- Each tracked child requires a stable React key for
AnimatePresenceto coordinate exits. - Simultaneous entry and exit animations may conflict if both rely on the same
layoutId.
Questions
- Does
mode="sync"cause the layout system to wait for exit animations to complete before measuring new positions for remaining items? - If layout measurements proceed immediately, what is the recommended pattern to prevent visual jumps while an item exits?