usePresence | Svelte Motion

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, usePresence() returns [isPresent, safeToRemove]. 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

exitsCompleted: 0

category · animate-presence

sheet · sheet 01 / 01

⟳ to re-run

custom exit via usePresence.

Default.svelte

UsePresenceCard.svelte