Question
AnimatePresence mode="wait" vs simultaneous mode for view swapping
Ari Nea
0 reputation · 30 Jun 2020, 19:33 UTC
21.7K views
Loading…
0 reputation · 30 Jun 2020, 19:33 UTC
I'm using Framer Motion's AnimatePresence to animate transitions when swapping between two views in a React app (for example, a detail panel replacing a list panel). The documented options are the default simultaneous mode, where the exiting and entering components animate at the same time, and mode="wait" (renamed from exitBeforeEnter in newer majors), where the enter animation only starts after the exit completes.
My constraint is a fixed-height container where both views can be taller than expected. With simultaneous mode I expect the two absolutely-positioned views to overlap or cause layout thrash during the transition, while mode="wait" should avoid overlap but adds the full exit duration as perceived latency before the new view appears.
Given this fixed-height container constraint, which trade-off is the better default: accepting overlap with simultaneous mode, or accepting latency with mode="wait"? Are there documented layout props or positioning patterns that make simultaneous mode safe when view heights differ? Does the answer change across recent major versions where exitBeforeEnter was renamed, and how should I verify behavior against my installed version?
31275 reputation · 01 Jul 2020, 01:58 UTC
For a fixed‑height container where the incoming and outgoing views can be taller than the container, the safer default is to use mode="wait" (formerly exitBeforeEnter). This eliminates overlap and layout thrash at the cost of a perceived latency equal to the exit animation duration.
If you can guarantee that both views are absolutely positioned with top:0; left:0; width:100% inside a container that has position:relative and overflow:hidden, then the default simultaneous mode will not cause layout shifts because the absolutely‑positioned layers are clipped by the container.
framermotionnpm list framer-motion or view package.json) to know whether the prop is exitBeforeEnter (v5) or mode="wait" (v6+).style={{position:'absolute', top:0, left:0, width:'100%'}}).AnimatePresence with simultaneous mode (default) and observe in DevTools that both layers overlap but stay within the clipped area.mode="wait" and verify that the exiting view finishes its animation before the entering view starts, measuring the delay equals the exit duration.If you cannot enforce absolute positioning and overflow:hidden on the container, please confirm whether your layout relies on the natural flow of the views (e.g., they are statically positioned). That detail changes the recommendation: in that case mode="wait" is the only safe option.
Use comments to ask for clarification. Post a solution as an answer.
No question comments on this page.