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

inline keyframes.

Pass an object directly to whileHover / whileTap. Right for one-off interactions — the animation is co-located with the element that uses it.

  • Best for one-off interactions where the animation only applies to a single element and won't be reused.
  • Repeat the object on every element if you need the same animation in multiple places — that duplication is the smell that pushes you toward the variant-key form below.
↩ all examples
form · inline-keyframes mode · live running source
hover or tap me whileHover={{...}}
category · inline
sheet · sheet 01 / 02
⟳ to re-run
FIG-002/ VARIANT

variant key.

Name the state on variants, reference it by string from any gesture prop. The same "hovered" key drives whileHover, and could just as easily drive whileFocus, whileDrag, or whileInView.

  • Define the state once on variants; any gesture prop on the same element (or its descendants) can pull from the same map by key.
  • Works with whileHover, whileTap, whileFocus, whileDrag, and whileInView. Pass a single string or an array of keys (later entries override earlier ones).
↩ all examples
form · variant-key mode · live running source
hover or tap me whileHover="hovered"
category · variant
sheet · sheet 02 / 02
⟳ to re-run