logo svelte /motion v0.6.4
FIG-001/ LAZY

load features around m.

Wrap m.* components in LazyMotion and pass a feature bundle. The element still animates on mount, while gesture support comes from the selected bundle.

  • LazyMotion provides the active feature bundle through context. Descendant m.* elements read that context before attaching gesture, drag, or layout behavior.
  • domAnimation is the usual interactive bundle: mount/update animations plus hover, tap, focus, pan, and in-view gestures.
↩ all examples
bundle · domAnimation mode · live running source
category · lazy
sheet · sheet 01 / 02
⟳ to re-run
FIG-002/ BUNDLES

compare domMin/domAnimation/domMax.

domMin keeps animation only, domAnimation enables gestures, and domMax adds drag/layout behavior for the subtree.

  • The same m.div receives different runtime capabilities depending on the nearest LazyMotion provider.
  • Try hover/tap across all three cards. Drag is intentionally available only under domMax.
↩ all examples
split · min / animation / max mode · live running source
domMin animation only
domMin
domAnimation gestures enabled
domAnimation
domMax gestures + drag + layout
domMax
category · bundles
sheet · sheet 02 / 02
⟳ to re-run