logo svelte /motion v2.10.0
FIG-001/ ANIMATE-PRESENCE

custom exit via usePresence.

<PresenceChild present={…}> keeps the card rendered after present flips false. Inside, usePresence hands the card a safeToRemove callback — the card runs its own CSS transition and releases the wrapper on transitionend.

  • PresenceChild holds the child rendered while the surrounding AnimatePresence is exiting it. The card stays in the DOM with isPresent === false until safeToRemove() fires.
  • Inside the card, const presence = usePresence() (called once) registers the card with its wrapper and returns [isPresent, safeToRemove] reactively. The effect listens for transitionend on the card node and calls safeToRemove once the CSS transition completes — fully custom exit under the component's own control.
  • Re-entering (clicking Show mid-exit) cancels the hold; the stale safeToRemove becomes a no-op so a late transitionend can't tear down a now-present card. onExitComplete on the parent tallies finished exits.
↩ all examples
pattern · PresenceChild + safeToRemove mode · live running source
// use-presence exits: 00
exit: css transition → safeToRemove()
category · animate-presence
sheet · sheet 01 / 02
⟳ to re-run
FIG-002/ OWNED-GROUP

wait for every exit.

Independent motion descendants share one owned wrapper. The fast exit finishes first; removal waits for the slow exit too.

↩ all examples
pattern · owned group + automatic completion mode · live running source

Click Hide group. Fast finishes first; the wrapper stays mounted while Slow finishes. Both are removed together. Show during exit to cancel, or Reset to start over.

Fast · 0.6 s
ready
Slow · 2.4 s
ready
Wrapper
removed
Completed groups
0

Progress follows the animated position. Completion states come from animation callbacks; the mounted state follows the actual wrapper.

category · owned-group
sheet · sheet 02 / 02
⟳ to re-run

usePresence