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

mount + animate.

The simplest motion lesson: declare initial, animate, and a transition. Motion tweens between them as the element enters. Replay to remount.

  • initial sets the values on mount; animate is the target. Motion tweens between them when the component enters the DOM — no manual lifecycle wiring required.
  • transition controls the duration, easing, and type. Here it's a 600ms linear tween — swap in type: 'spring' for physics-based motion, or set duration: 0 to skip the tween entirely.
  • The Replay button bumps a key on a {#key} block — Svelte tears the button down and re-mounts it, so motion runs the entrance tween again. Same trick works for any single-shot animation.
↩ all examples
pattern · mount tween mode · live running source
category · animate
sheet · sheet 01 / 01
⟳ to re-run