Animate Presence
Keep conditional content mounted until its exit animation and nested exits finish.Overview
AnimatePresence gives user-owned conditional content a reliable exit lifecycle. It keeps the wrapped region mounted until its Web Animations exit has settled, then removes it without leaving focusable hidden content behind.
Behaviour and customization
sync permits an interrupted exit to re-enter immediately. wait queues a re-entry until the current exit settles. Nested presence regions notify their parent first, so a parent waits for child exits before it unmounts.
Choose initial, animate, exit, and a semantic transition from the motion tokens. Use returnFocus for an explicit post-exit focus destination and custom with usePresenceData when descendants need exit metadata.
Interactive examples
Nested presence
Nested content
Drag and drop
Automatic layout
Usage
<script lang="ts">
import { AnimatePresence, presets, transitions } from 'fractalsvelte/motion';
let open = $state(false);
</script>
<button onclick={() => (open = !open)}>Toggle details</button>
<AnimatePresence present={open} mode="wait" initial={presets.fadeUp.initial} animate={presets.fadeUp.animate} exit={presets.fadeUp.exit} transition={transitions.fast}>
<section>Details that exit accessibly.</section>
</AnimatePresence>API
| Prop | Type | Default | Description |
|---|---|---|---|
present | boolean | - | Whether the region should be visibly present. |
mode | 'sync' | 'wait' | 'sync' | Re-entry sequencing policy. |
returnFocus | HTMLElement | () => HTMLElement | - | Optional focus destination after exit. |
custom | unknown | - | Data exposed to descendants through usePresenceData. |
Components and blocks
Use this primitive directly for custom interfaces; Fractalsvelte also applies it or its motion language in these areas:
- Accordion
- Collapsible
- Dialog
- Drawer
- Sheet
- Popover
- menus
- Toast
- Tabs
- Tree View
- Carousel
For exact built-in component timing and reduced-motion behaviour, see the Motion guide.