logo svelte /motion v0.7.17
FIG-001/ HOOK

frame-by-frame cube.

useAnimationFrame(cb) calls cb(time, delta) every frame and returns a cleanup. Use time to drive trig functions and you get smooth, perpetual motion without component re-renders.

  • The callback receives time (ms since the loop started) and delta (ms since last frame). Driving rotations from Math.sin(time / 1000) gives you smooth oscillation that is frame-rate independent.
  • Writing directly to element.style.transform skips Svelte's reactivity — perfect when you'd otherwise trigger 60 component re-renders a second. Use this pattern for canvas / WebGL drivers too.
  • Wrap the call in $effect and return the cleanup. Svelte runs the effect after mount, and tears down the loop when the component unmounts — no leaked rAF callbacks even during fast HMR.
↩ all examples
pattern · rAF + direct style write mode · live running source
category · hook
sheet · sheet 01 / 01
⟳ to re-run

useAnimationFrame