logo svelte /motion v0.7.12
FIG-001/ VANILLA

motion values on plain elements.

No motion components anywhere: a $state slider feeds toMotionValue, mapValue derives position and color, springValue smooths them, and styleEffect binds the result to a plain div.

  • toMotionValue(() => slider / 100) is the rune bridge — reads of $state inside the getter are tracked, so plain Svelte state drives the whole motion-value chain. Everything here works in module scope or a .svelte.ts store too.
  • mapValue mixes COLOR stops as happily as numbers — one spring-smoothed progress value drives position, backgroundColor, and a tinted boxShadow through three-stop ranges.
  • styleEffect binds the values straight to a plain <div> — updates run on Motion's frame loop, outside Svelte's render cycle. The unbind function and .destroy() calls in the $effect cleanups are the manual lifecycle vanilla values ask for.
↩ all examples
pattern · rune-bridge mode · live running source
category · vanilla
sheet · sheet 01 / 01
⟳ to re-run