logo svelte /motion v2.4.0
FIG-001/ MEDIA

a stagger that re-runs on a breakpoint.

Setup staggers the list in from one side and adds a hover nudge. With matchMedia conditions, crossing 800px cancels the scope and runs setup again, so the list re-staggers from the other end.

  • matchMedia: { wide: '>=800', narrow: '<800' } — resize the window across 800px and scope.media flips, setup runs again and the stagger changes direction.
  • The stagger animate() call passes only a delay. The spring comes from the scope's default transition.
  • hover('li', …) is collected by the scope, so each re-run replaces it instead of stacking listeners.
↩ all examples
matchMedia · wide · narrow mode · live running source
// breakpoint stagger —
  • Spring
  • Tween
  • Inertia
  • Keyframes
  • Stagger
setup runs · 0
category · media
sheet · sheet 01 / 02
⟳ to re-run
FIG-002/ CANCEL

a reset button that cancels everything.

Scatter animates every tile inside the scope with run(). Reset calls cancel(): the springs stop and each tile’s inline style is restored, so they snap straight home.

  • cancel() stops everything in the scope and restores the style attribute of every element it animated. stop() would freeze the tiles where they are instead.
  • Event handlers reach the live scope through scope.current; wrapping work in run() (or bind()) is what gets it collected.
↩ all examples
method · cancel() mode · live running source
// cancel resets scope · active
01
02
03
04
05
06
07
08
09
category · cancel
sheet · sheet 02 / 02
⟳ to re-run

useScopeMotion