# AnimatePresence > Animate components when they are added to or removed from the DOM using Svelte Motion. Smooth enter and exit transitions made easy. **Source:** [https://motion.svelte.page/examples/animate-presence](https://motion.svelte.page/examples/animate-presence) **Markdown mirror:** [https://motion.svelte.page/examples/animate-presence.md](https://motion.svelte.page/examples/animate-presence.md) --- This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page. ## FIG-001: enter + exit with AnimatePresence. The existing conditional API snapshots a removed `motion.*` element and runs its `exit` prop on a visual clone. **Metadata:** tag: `ANIMATE-PRESENCE` | pattern: `enter + exit` ### Notes - 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. ### Source #### Default.svelte Source file: [src/lib/examples/animate-presence/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/animate-presence/demos/Default.svelte) ```svelte

// presence state: {isVisible ? 'mounted' : 'unmounted'}

{#if isVisible} ({ transformOrigin: 'center' }))} >

({ flex: 'none', width: 8, height: 8, borderRadius: '50%', backgroundColor: 'var(--brut-accent, #247768)' }))} > unit.01

enter: scale 0 → 1
exit: scale 1 → 0

{/if}

(isVisible = !isVisible)} whileHover={{ scale: 1.04 }} whileTap={{ scale: 0.96 }} transition={{ type: 'spring', stiffness: 500, damping: 30 }} style={styleString(() => ({ fontFamily: 'var(--brut-mono, monospace)', fontSize: '0.6875rem', textTransform: 'uppercase', letterSpacing: '0.08em', border: '1px solid var(--brut-accent, #247768)', backgroundColor: 'var(--brut-accent-soft, rgba(36, 119, 104, 0.1))', color: 'var(--brut-accent, #247768)', padding: '0.5rem 0.875rem', cursor: 'pointer' }))} > {isVisible ? '– unmount unit' : '+ mount unit'} spring: 300 / 25

``` ## FIG-002: exit the real node. `present` plus a named `child` snippet lets AnimatePresence retain the original DOM subtree until its nested `motion.*` exit completes. **Metadata:** tag: `OWNED-CHILD` | mechanism: `real node` ### Notes - 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. ### Source #### OwnedChildMotion.svelte Source file: [src/lib/examples/animate-presence/demos/OwnedChildMotion.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/animate-presence/demos/OwnedChildMotion.svelte) ```svelte

(completed += 1)}> {#snippet child()} ({ width: 210, border: '1px solid var(--brut-accent, #247768)', backgroundColor: 'var(--brut-bg-2, #eef4f1)', color: 'var(--brut-ink, #0a0a0a)', padding: 18, boxShadow: '6px 6px 0 var(--brut-rule, #d6dedb)' }))} >

real DOM node

AnimatePresence owns this child

Exit completes before this node is removed.

{/snippet}

(visible = !visible)} whileHover={{ scale: 1.04 }} whileTap={{ scale: 0.96 }} style={styleString(() => ({ border: '1px solid var(--brut-accent, #247768)', backgroundColor: 'var(--brut-accent-soft, rgba(36, 119, 104, 0.1))', color: 'var(--brut-accent, #247768)', padding: '0.5rem 0.75rem', cursor: 'pointer' }))} > {visible ? 'run real-node exit' : 'mount again'} completed: {completed}

``` ## FIG-003: 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. **Metadata:** tag: `MECHANISM-COMPARISON` | decisive test: `rapid re-entry` ### Notes - 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. ### Source #### CloneVsOwned.svelte Source file: [src/lib/examples/animate-presence/demos/CloneVsOwned.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/animate-presence/demos/CloneVsOwned.svelte) ```svelte

Try the decisive test Click each lane’s button twice quickly.

Existing API

Clone fallback

{#if cloneVisible} Detached ghost {/if}

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

Owned API

Real node

{#snippet child()} Original instance {/snippet}

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

```