logo svelte /motion v0.6.4
FIG-001/ MOTION-VALUE

style objects can carry MotionValues.

One progress MotionValue derives transform shortcuts, opacity, color, box-shadow, and a CSS variable directly inside the style object. Static entries render immediately; live entries update through motion-dom.

  • Transform shortcuts like x, y, rotate, and scale are composed by Motion's style effect.
  • Non-transform properties like backgroundColor and boxShadow can be MotionValues too.
  • Static object entries such as width and height render with the initial markup, so the first paint is stable.
↩ all examples
api · style={{ x, opacity }}effect · motion-dom mode · live running source
Origin queued
Destination delivered
queued style object
category · motion-value
sheet · sheet 01 / 01
⟳ to re-run