# useAnimationFrame
> Run animations on every frame with Svelte Motion useAnimationFrame. Access delta time and elapsed time for smooth, frame-based effects.
**Source:** [https://motion.svelte.page/examples/use-animation-frame](https://motion.svelte.page/examples/use-animation-frame)
**Markdown mirror:** [https://motion.svelte.page/examples/use-animation-frame.md](https://motion.svelte.page/examples/use-animation-frame.md)
---
This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page.
## FIG-001: 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.
**Metadata:** tag: `HOOK` | pattern: `rAF + direct style write`
### Notes
- 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.
### Source
#### Default.svelte
Source file: [src/lib/examples/use-animation-frame/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/use-animation-frame/demos/Default.svelte)
```svelte