AnimatePresence custom

AnimatePresence accepts a custom prop for data that exiting children still need after they have been removed from Svelte state. This mirrors Motion’s presence context: exit variants resolve with the latest parent custom value, falling back to the motion element’s own custom only when the parent doesn’t provide one.

<script lang="ts">
    import { AnimatePresence, motion, type Variants } from '@humanspeak/svelte-motion'

    let index = $state(0)
    let direction = $state(1)

    const variants: Variants = {
        enter: (direction) => ({ x: direction > 0 ? 120 : -120, opacity: 0 }),
        center: { x: 0, opacity: 1 },
        exit: (direction) => ({ x: direction > 0 ? -120 : 120, opacity: 0 })
    }
</script>

<AnimatePresence custom={direction} initial={false}>
    <motion.div
        key={index}
        {variants}
        initial="enter"
        animate="center"
        exit="exit"
    />
</AnimatePresence>

<script lang="ts">
    import { AnimatePresence, motion, type Variants } from '@humanspeak/svelte-motion'

    let index = $state(0)
    let direction = $state(1)

    const variants: Variants = {
        enter: (direction) => ({ x: direction > 0 ? 120 : -120, opacity: 0 }),
        center: { x: 0, opacity: 1 },
        exit: (direction) => ({ x: direction > 0 ? -120 : 120, opacity: 0 })
    }
</script>

<AnimatePresence custom={direction} initial={false}>
    <motion.div
        key={index}
        {variants}
        initial="enter"
        animate="center"
        exit="exit"
    />
</AnimatePresence>

mode · live running open

presence custom

Exit follows your last move

The leaving card reads the latest parent custom value, even after Svelte has swapped it.

01 next exit ->

next custom=1

Why parent custom matters

When a child is removed, its props are already stale. A directional carousel needs the new navigation direction to tell the old slide where to exit. Passing custom={direction} to AnimatePresence makes that direction available to the exiting variant at the exact moment the exit animation is resolved.

API Reference