React removes elements from the DOM immediately. There's no lifecycle hook for "about to leave" — the node is just gone. AnimatePresence intercepts this. It holds the unmounting element in the tree long enough to run an exit animation, then removes it.
The exit prop
Wrap any conditional element in AnimatePresence and define an exit state. Motion will animate toward that state before React unmounts the node.
The key prop is what makes this work. It tells AnimatePresence which element is entering and which is leaving. Without a unique key, React reuses the same DOM node — the exit animation never fires because the node never actually leaves.
Exit modes
The mode prop controls the timing relationship between the entering and exiting elements. Toggle between the three modes and watch how the transition changes:
wait— the old element finishes its exit before the new one enters. Sequential, no overlap.sync— both animations run simultaneously. The old element exits while the new one enters, so both are briefly visible.popLayout— the exiting element is pulled out of document flow immediately, so the new element can animate into position without waiting. The exit still plays, but it no longer affects layout.
wait is the safest default for most transitions — it avoids layout shifts and keeps the flow predictable. popLayout is the right choice when the exiting element would otherwise push content around during its exit, like items in a reorderable list.
Read more in the AnimatePresence docs on motion.dev.