Variants Propagation | Svelte Motion

FIG-001/ VARIANTS

variant cascade.

Parent's animate flows through the descendant tree. Each child looks up the same label in its own variants map — one boolean, an orchestrated cascade.

The parent motion.ul sets animate={isVisible ? "visible" : "hidden"}. Motion walks the descendant motion.* tree and runs the same label on each — children only need to register their own definitions in variants.
The container variant only animates opacity; items animate opacity + x. Different shapes, same label — motion applies whatever each variant declares. Useful for broadcasting a "state" without coupling parent + child styles.
Per-element transition objects compose with the cascade. delay: i * 0.1 on each motion.li staggers the entrance without any orchestration logic at the parent.

↩ all examples

pattern · parent → children mode · live running source

Item 1
Item 2
Item 3
Item 4

category · variants

sheet · sheet 01 / 01

⟳ to re-run