# useAnimationFrame
> Run a callback on every animation frame for smooth, time-based animations.
**Source:** [https://motion.svelte.page/docs/use-animation-frame](https://motion.svelte.page/docs/use-animation-frame)
---
`useAnimationFrame` runs a callback once every animation frame, providing direct access to the browser's animation loop.
```svelte
Rotating content
```
## Usage
The callback receives a `DOMHighResTimeStamp` representing the time elapsed since the time origin, in milliseconds.
```svelte
Animated content
```
> Live example: [/examples/use-animation-frame](https://motion.svelte.page/examples/use-animation-frame)
## How it works
`useAnimationFrame` provides a simple way to create time-based animations by:
1. Starting a `requestAnimationFrame` loop when called
2. Calling your callback with the current timestamp on each frame
3. Returning a cleanup function that stops the animation loop
### With $effect
For Svelte 5, wrap `useAnimationFrame` in a `$effect` and return its cleanup function. This ensures the animation loop is properly stopped when the component unmounts:
```svelte
```
## Performance
`useAnimationFrame` is optimized for performance:
- **Native timing**: Uses `requestAnimationFrame` which runs at the optimal frame rate (typically 60 FPS)
- **Automatic cleanup**: Cancels animation frames when the effect is destroyed
- **SSR-safe**: Returns a no-op function in server-side rendering environments
## Common patterns
### Smooth rotation
```svelte
```
### Pulsing animation
```svelte
```
### Oscillating movement
```svelte
```
## API Reference
### Parameters
The callback function receives one argument:
- **time** `number` - The total milliseconds since the animation started (DOMHighResTimeStamp)
### Returns
A cleanup function `() => void` that stops the animation loop when called.
## When to use
Use `useAnimationFrame` when you need:
- Frame-by-frame control over animations
- Time-based calculations for smooth motion
- Complex animation logic that depends on elapsed time
- Direct DOM manipulation for performance-critical animations
For declarative animations, consider using the `motion` component with `animate` props instead.
## See also
- [useTime](/docs/use-time) - For reactive time stores
- [Motion component](/docs) - For declarative animations
- [Examples](/examples) - See useAnimationFrame in action
---
Based on [Motion's useAnimationFrame](https://motion.dev/docs/react-use-animation-frame) API.