{/if} ``` This maps one-to-one from Motion: ```jsx // motion/react {show && ( )} ``` The exit runs through Motion's animation state, so it can be a [variant](/docs/api/variants), and children with variants exit with it — staggered, or before or after it with `when`: ```svelte {#if open}

{label}

{/if} ``` Svelte removes the element as soon as the whole exit — children included — has finished. ### Exit variants and `custom` An exiting element no longer receives new props, but its exit may depend on state that changed since — like which way a slideshow is going. As with ``, the `custom` on `presence` is passed to the exit's dynamic variants: ```svelte {#key index}

{slides[index]}

{/key} ``` ## Shorthand Without an attachment, describe the hidden state on `presence`: ```svelte {#if show}

Hello

{/if} ``` - **`initial`** — the hidden state the element enters **from**. It animates from these values to its own CSS styles. - **`exit`** — the values the element animates **to** before it's removed. - **`transition`** — shared by both directions. Each side can override it with its own `transition`, e.g. `exit: { opacity: 0, transition: { duration: 0.15 } }`. Your CSS stays the resting state: once an enter finishes, Mercury hands the animated properties back to the element's styles, so an element that entered from `height: 0` keeps following its content, and an `opacity` class keeps applying. Transform values (`x`, `y`, `scale`, `rotate`…) settle at their identity. For simple cases, skip `initial`/`exit` and pass the hidden state directly. Enters animate **from** it, exits **to** it: ```svelte

``` ## Options These go on `presence` with either style: - **`mode`** — `'sync' | 'wait' | 'popLayout'`, matching ``. - **`custom`** — data for the exit's dynamic variants (see above). - **`onExitComplete`** — called once the exit has finished, right before the element is removed. ```svelte

console.log('gone') }} /> ``` ## First render (`initial={false}`) Svelte transitions are _local_ by default: they don't play when an **ancestor** block mounts, only when the element's own block is added or removed. For the shorthand that's exactly ``; opt in to Motion's default with `|global`: ```svelte

``` With the Motion-style attachment, `initial` plays whenever the element mounts, like a `motion.div`. Use `initial: false` to skip it. ## Modes (`sync`, `wait` and `popLayout`) Quoting [Motion's documentation](https://motion.dev/docs/react-animate-presence#mode): > - “sync”: Children animate in/out as soon as they’re added/removed. > - “wait”: The entering child will wait until the exiting child has animated out. Note: Currently only renders a single child at a time. > - “popLayout”: Exiting children will be “popped” out of the page layout. This allows surrounding elements to move to their new layout immediately. ```svelte {#key currentTab}

{currentTab.content}

{/key} ``` - **`mode: 'sync'`** (default) — entering and exiting elements animate at the same time. - **`mode: 'wait'`** — the entering element stays out of the page (`display: none`) until the exiting one has animated out and been removed, then animates in. Mercury coordinates this for `presence` and `mercury()` enters under the same parent element. - **`mode: 'popLayout'`** — the exiting element is pinned where it is with `position: absolute` at its measured size and offset, so siblings reflow immediately while it animates out. Its parent becomes `position: relative` while any child is popped, if it was `static`. ## Interruptions Presence animations are interruptible, like Motion's: - If an element is re-inserted while its exit is still running (a quick toggle back), it animates from wherever the exit left off back to its resting state, instead of replaying the enter. - If an exit starts mid-enter, it animates from the current state. :::note `presence` respects the user's `prefers-reduced-motion` setting: the shorthand adds and removes elements without animating, and Motion-style exits follow Mercury's [reduced motion](/docs/api/configuration#reduced-motion) rules. ::: ## Caveats & differences from Motion `presence` is built directly on Svelte transitions instead of a wrapper component. The common cases map over cleanly, but a few rules come from Svelte's model rather than Mercury and are worth knowing up front. ### Exits inside a conditional parent need `|global` Svelte does **not** play a _local_ `out:` transition when a **parent** block (`{#if}`, `{#key}`, `{#each}`) is the thing being removed — it only plays local transitions when the element's own block is removed. If an ancestor block is destroyed, add the `|global` modifier so the exit still runs: ```svelte {#if open} {#if state === 'success'} {:else} {/if} {/if} ``` Rule of thumb: if the element's own `{#if}` toggles, local `presence` is fine; if an ancestor block is removed, use `presence|global`. ### `exit` needs `presence` Like Motion's `exit` outside ``, an `exit` on the attachment does nothing unless the element has `transition:presence` or `out:presence`: without a transition, Svelte removes the element immediately. ### `mode` is set per element, not on a wrapper Motion sets `mode` once on ``. In Mercury the mode lives on each element's `presence`. For a list, set the same `mode` on every item. ### `popLayout` reflows siblings instantly Motion pairs `popLayout` with the `layout` prop so neighbours _animate_ to their new positions. Mercury's `popLayout` pops the exiting element out of flow; for a smooth reflow, add Mercury's [`layout`](/docs/api/layout-animations) to the siblings. ### `wait` coordinates through the shared parent `wait` sequences the next enter after the current exit through the **shared parent element**. The entering and exiting elements must live under the same DOM parent — keyed swaps (`{#key}`) and `{#if}` / `{:else}` blocks normally satisfy this.