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

enter + exit with AnimatePresence.

The existing conditional API snapshots a removed motion.* element and runs its exit prop on a visual clone.

  • The unit card has initial, animate, and exit props. On mount, the real node tweens from initial → animate. On removal, Svelte destroys that node and AnimatePresence runs animate → exit on its captured clone.
  • Without AnimatePresence, a Svelte {#if} would tear the node down immediately and the exit animation would never get a chance to run. The conditional AnimatePresence form captures a clone before teardown and animates that detached snapshot.
  • 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
// presence state: mounted
unit.01
enter
scale 0 → 1
exit
scale 1 → 0
spring: 300 / 25
category · animate-presence
sheet · sheet 01 / 03
⟳ to re-run
FIG-002/ OWNED-CHILD

exit the real node.

present plus a named child snippet lets AnimatePresence retain the original DOM subtree until its nested motion.* exit completes.

  • The element that exits is the original DOM node, so live state and its VisualElement remain available for the whole animation.
  • Use the owned API when clone fidelity is not sufficient—for example, focus-sensitive content, reversible exits, or a canvas-driven integration.
  • Toggling present back to true cancels an in-flight exit and keeps stale completion callbacks from removing the re-entered node.
↩ all examples
mechanism · real node mode · live running source

real DOM node

AnimatePresence owns this child

Exit completes before this node is removed.

completed: 0
category · owned-child
sheet · sheet 02 / 03
⟳ to re-run
FIG-003/ MECHANISM-COMPARISON

clone ghost vs. live node.

Toggle each lane twice quickly. The conditional form mounts a new node beside an exiting ghost; present={visible} reverses the original node in place.

  • Click a lane’s button twice before its exit finishes. This makes node identity visible instead of comparing two similar-looking one-way fades.
  • The clone lane has two identities during rapid re-entry: a new live node and the old detached ghost. The owned lane keeps one identity and reverses it.
  • Edit each input before toggling. Only the owned lane can preserve that live browser state while an exit is reversed.
↩ all examples
decisive test · rapid re-entry mode · live running source
Try the decisive test Click each lane’s button twice quickly.
Existing API

Clone fallback

Detached ghost

Rapid re-entry creates a new node while the old clone keeps exiting.

Owned API

Real node

Original instance

Rapid re-entry reverses the same node and preserves its live state.

category · mechanism-comparison
sheet · sheet 03 / 03
⟳ to re-run

AnimatePresence