# AnimatePresence custom > Directional exit animations powered by AnimatePresence custom data and dynamic variants. **Source:** [https://motion.svelte.page/examples/animate-presence-custom](https://motion.svelte.page/examples/animate-presence-custom) **Markdown mirror:** [https://motion.svelte.page/examples/animate-presence-custom.md](https://motion.svelte.page/examples/animate-presence-custom.md) --- This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page. ## FIG-001: directional exits with custom data. `` forwards the latest direction into exiting dynamic variants. The leaving card can move left or right even after it has been removed from Svelte state. **Metadata:** tag: `PRESENCE` | exit data: `presence custom` ### Notes - The parent updates `direction` before swapping the keyed child. - The exiting child resolves `exit` with `AnimatePresence` custom data, matching upstream Motion. - The child has intentionally stale `custom` data to prove the parent presence value wins during exit. ### Source #### Default.svelte Source file: [src/lib/examples/animate-presence-custom/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/animate-presence-custom/demos/Default.svelte) ```svelte
// presence custom
{#key active.id}
{active.label}
{active.title}

{active.copy}

{String(index + 1).padStart(2, '0')} {direction > 0 ? 'next exit ->' : '<- previous exit'}
{/key}
{direction > 0 ? 'next' : 'previous'} custom={direction}
``` ## FIG-002: Motion canonical usePresenceData. This mirrors Motion’s published example: the parent passes `custom={direction}` and the exiting slide reads that value with `usePresenceData()`. **Metadata:** tag: `UPSTREAM` | api: `usePresenceData` | mode: `popLayout` ### Notes - The controls update `direction`, then wrap the selected item. - The slide calls `usePresenceData()` to read the latest `AnimatePresence` custom value. - `mode="popLayout"` pops the exiting square out while the next one enters. ### Source #### UsePresenceData.svelte Source file: [src/lib/examples/animate-presence-custom/demos/UsePresenceData.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/animate-presence-custom/demos/UsePresenceData.svelte) ```svelte
// use-presence-data slide {String(selectedItem).padStart(2, '0')} / custom={direction}
setSlide(-1)} whileFocus={{ outline: `2px solid ${color}` }} whileTap={{ scale: 0.9 }} > {#key selectedItem} {/key} setSlide(1)} whileFocus={{ outline: `2px solid ${color}` }} whileTap={{ scale: 0.9 }} >
mode: poplayout / exit reads usePresenceData()
``` #### PresenceDataSlide.svelte Source file: [src/lib/examples/animate-presence-custom/demos/PresenceDataSlide.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/animate-presence-custom/demos/PresenceDataSlide.svelte) ```svelte {String(slideKey).padStart(2, '0')} ```