# AnimatePresence > Animate components when they are added to or removed from the DOM **Source:** [https://motion.svelte.page/docs/animate-presence](https://motion.svelte.page/docs/animate-presence) --- `AnimatePresence` enables exit animations for components when they are removed from the DOM. Wrap your conditional content with `AnimatePresence` to animate children as they enter and exit. ```svelte {#if isVisible} {/if} ``` > Live example: [/examples/animate-presence](https://motion.svelte.page/examples/animate-presence) ## How it works When a `motion` component inside `AnimatePresence` is conditionally removed: 1. The component's last position and styles are captured 2. A visual clone is created at that exact position 3. The `exit` animation runs on the clone 4. Once complete, the clone is removed from the DOM This approach ensures smooth exit animations even though the original Svelte component has already unmounted. ## Usage ### Basic enter/exit The most common pattern is toggling visibility with enter and exit animations: ```svelte {#if isVisible} Modal content {/if} isVisible = !isVisible}> Toggle ``` ### The `key` prop When using `AnimatePresence`, motion components need a `key` prop to track their identity: ```svelte {#if isVisible} {/if} ``` The `key` is used to: - Track which components are entering vs. exiting - Ensure the correct exit animation plays for each component - Handle re-entry animations correctly ### Suppressing initial animation By default, all children animate when `AnimatePresence` first mounts. To prevent this, set `initial={false}`: ```svelte {#if isVisible} {/if} ``` With `initial={false}`: - Children present on first render skip their enter animation - Only subsequent entries (after exits) will animate in ### Exit completion callback Use `onExitComplete` to run code after all exit animations finish: ```svelte {#if isVisible} {/if} ``` This is useful for: - Navigation after a page transition completes - Cleanup operations - Triggering subsequent animations ## Working with lists `AnimatePresence` works with dynamic lists using Svelte's `{#each}` block: ```svelte {#each items as item (item.id)} {item.text} removeItem(item.id)}>Remove {/each} ``` > **Important**: Use Svelte's keyed `{#each}` block (`{#each items as item (item.id)}`) and pass a matching string `key` prop to the motion component. ## Combining with variants `AnimatePresence` works seamlessly with variants for cleaner, reusable animations: ```svelte {#if isVisible} {/if} ``` ## Exit transition configuration You can specify a custom transition for the exit animation: ```svelte ``` The exit transition takes precedence over the component's general `transition` prop. ## Props ### AnimatePresence | Prop | Type | Default | Description | |------|------|---------|-------------| | `initial` | `boolean` | `true` | When `false`, children skip their enter animation on initial mount | | `onExitComplete` | `() => void` | `undefined` | Callback invoked once all exit animations complete | ### Motion component props (for AnimatePresence) | Prop | Type | Description | |------|------|-------------| | `key` | `string` | Required. Unique identifier for tracking enter/exit state | | `initial` | `object \| string \| false` | Initial animation state | | `animate` | `object \| string` | Target animation state | | `exit` | `object \| string` | Exit animation state when component is removed | ## Best practices ### 1. Always provide a key Every motion component inside `AnimatePresence` should have a unique `key`: ```svelte ``` ### 2. Use semantic exit animations Exit animations should feel natural and match the context: ```svelte ``` ### 3. Match enter and exit For visual consistency, exit animations often mirror enter animations: ```svelte /> ``` ### 4. Consider performance Keep exit animations short (200-400ms) to avoid UI feeling sluggish: ```svelte ``` ## Common patterns ### Page transitions ```svelte {#key $page.url.pathname} {/key} ``` ### Modal/Dialog ```svelte {#if showModal} showModal = false} /> Modal content {/if} ``` ### Notification stack ```svelte {#each notifications as notification (notification.id)} {notification.message} {/each} ``` ## Related - [Variants](/docs/variants) - Define reusable animation states - [Examples](/examples/animate-presence) - See AnimatePresence in action - [Motion Component](/docs) - Full API reference --- Based on [Motion's AnimatePresence](https://motion.dev/docs/react-animate-presence) API.