AnimatePresence

AnimatePresence gives you exit animations for motion.* elements that leave the tree.

Props

• initial: boolean. Set false to skip initial enter animations.
• mode: "sync" | "wait" | "popLayout". motion-solid defaults to popLayout.
• custom: unknown. Payload passed to exiting children and variant functions.
• onExitComplete: () => void. Runs after all pending exits finish.
• propagate: boolean. Lets parent removal trigger nested exit animations.
• presenceAffectsLayout: boolean. Controls whether exit completion forces layout refresh.
• root: HTMLElement | ShadowRoot. Style injection target for popLayout.
• anchorX: "left" | "right". Pop layout horizontal anchor.
• anchorY: "top" | "bottom". Pop layout vertical anchor.

Hooks

• usePresence(subscribe?: boolean): [Accessor<boolean>, VoidFunction | undefined]
• useIsPresent(): Accessor<boolean>
• usePresenceData<T>(): Accessor<T | undefined>

Caveat

• Solid disposes exiting owners immediately. Exit and shared-layout handoff keep the DOM node, but the removed subtree no longer updates reactively.
• sync is available, but popLayout is the safer default for the Solid exit model.
• Retained exiting nodes still fire their own onAnimationStart and onAnimationComplete callbacks. Use onExitComplete for the parent-level "all exits finished" signal.
• Durationless spring exits wait for the actual animation to settle instead of using a short guessed timeout.

Example

<AnimatePresence>
  <Show when={open()}>
    <motion.div
      initial={{ opacity: 0, scale: 0.9 }}
      animate={{ opacity: 1, scale: 1 }}
      exit={{ opacity: 0, scale: 0.9 }}
    />
  </Show>
</AnimatePresence>