logo svelte /motion v0.6.4
FIG-001/ ANIMATE-PRESENCE

enter + exit with AnimatePresence.

A motion.* element inside <AnimatePresence> runs its exit prop when it leaves the DOM. The same spring carries it in (initial → animate) and out (animate → exit).

  • The cyan box has initial, animate, and exit props. On mount, motion tweens from initial → animate; on unmount inside AnimatePresence, it tweens from animate → exit before the DOM node is removed.
  • Without AnimatePresence, a Svelte {#if} would tear the node down immediately and the exit animation would never get a chance to run. The wrapper holds the node alive until exit finishes.
  • The transition applies to all three phases — same spring (stiffness: 300, damping: 25) on the way in and on the way out, so the motion feels symmetric instead of snappy-in / linear-out.
↩ all examples
pattern · enter + exit mode · live running source
Hello
State: visible
category · animate-presence
sheet · sheet 01 / 01
⟳ to re-run