logo svelte /motion v0.6.4
FIG-001/ PRESENCE

directional exits with custom data.

<AnimatePresence custom={direction}> forwards the latest direction into exiting dynamic variants. The leaving card can move left or right even after it has been removed from Svelte state.

  • The parent updates direction before swapping the keyed child.
  • The exiting child resolves exit with AnimatePresence custom data, matching upstream Motion.
  • The child has intentionally stale custom data to prove the parent presence value wins during exit.
↩ all examples
exit data · presence custom mode · live running source
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
category · presence
sheet · sheet 01 / 02
⟳ to re-run
FIG-002/ UPSTREAM

Motion canonical usePresenceData.

This mirrors Motion’s published example: the parent passes custom={direction} and the exiting slide reads that value with usePresenceData().

  • The controls update direction, then wrap the selected item.
  • The slide calls usePresenceData() to read the latest AnimatePresence custom value.
  • mode="popLayout" pops the exiting square out while the next one enters.
↩ all examples
api · usePresenceDatamode · popLayout mode · live running source
category · upstream
sheet · sheet 02 / 02
⟳ to re-run