Multi-State Badge | Svelte Motion

FIG-001/ ANIMATE-PRESENCE

multi-state badge.

A badge that cycles idle → processing → success → error → idle. Click to advance. Each state swap exits and enters its icon + label inside AnimatePresence, with blur + scale carrying the transitions.

The badge holds an enum state (idle, processing, success, error) — clicking advances to the next via getNextState(). State change drives every animation downstream.
Icon + label both live inside AnimatePresence keyed by state. Exit blurs and shrinks the outgoing content; enter blurs and grows the incoming content. Layout stays put because the badge chrome wraps the presence.
The composition lives in $lib/examples/multi-state-badge/Badge.svelte alongside icon helpers. The demo file is a thin wrapper that owns the state cycle — the animation lives in the badge components.

↩ all examples

pattern · state-cycle mode · live running source

category · animate-presence

sheet · sheet 01 / 01

⟳ to re-run