# usePresence > Custom exit animations from inside the child. PresenceChild holds the component rendered until your safeToRemove() fires. **Source:** [https://motion.svelte.page/examples/use-presence](https://motion.svelte.page/examples/use-presence) **Markdown mirror:** [https://motion.svelte.page/examples/use-presence.md](https://motion.svelte.page/examples/use-presence.md) --- This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page. ## FIG-001: custom exit via usePresence. `` keeps the card rendered after `present` flips false. Inside, `usePresence` hands the card a `safeToRemove` callback — the card runs its own CSS transition and releases the wrapper on `transitionend`. **Metadata:** tag: `ANIMATE-PRESENCE` | pattern: `PresenceChild + safeToRemove` ### Notes - `PresenceChild` holds the child rendered while the surrounding `AnimatePresence` is exiting it. The card stays in the DOM with `isPresent === false` until `safeToRemove()` fires. - Inside the card, `usePresence()` returns `[isPresent, safeToRemove]`. The effect listens for `transitionend` on the card node and calls `safeToRemove` once the CSS transition completes — fully custom exit under the component's own control. - Re-entering (clicking Show mid-exit) cancels the hold; the stale `safeToRemove` becomes a no-op so a late `transitionend` can't tear down a now-present card. `onExitComplete` on the parent tallies finished exits. ### Source #### Default.svelte Source file: [src/lib/examples/use-presence/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/use-presence/demos/Default.svelte) ```svelte

// use-presence exits: {String(exitsCompleted).padStart(2, '0')}

{#if mounted} exitsCompleted++}> {/if}

(visible = !visible)} 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' }))} > {visible ? '– hide card' : '+ show card'} exit: css transition → safeToRemove()

``` #### UsePresenceCard.svelte Source file: [src/lib/examples/use-presence/demos/UsePresenceCard.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/use-presence/demos/UsePresenceCard.svelte) ```svelte

// usePresence() {isPresent ? 'present' : 'exiting'}

```