logo svelte /motion v0.7.17
FIG-001/ VARIANTS

collapsing notifications.

A single boolean (isOpen) flips the parent into a named variant. The variant cascades into every descendant — stack chrome, header, and each notification expose their own open / closed definitions and animate together.

  • Click any card to flip isOpen. The parent motion.div sets animate={isOpen ? 'open' : 'closed'} — motion then walks the descendant tree looking for matching variants keys and animates each one.
  • Each notification's closed variant is parameterised by its index — the further down the stack, the more it offsets, scales, and fades. So three cards collapse into a layered preview that re-expands cleanly.
  • Per-element transition objects let the header lead/lag the cards via delay, and each notification staggers by i * 0.04s — a single boolean still drives a feel-good cascade.
↩ all examples
pattern · variant cascade mode · live running source

Notifications

Note 1
Note 2
Note 3
State: closed
category · variants
sheet · sheet 01 / 01
⟳ to re-run

Notifications Stack