# useAnimate
> Imperative animation with a scoped CSS-selector API. Sequenced staggered list with a follow-up beat on a target button.
**Source:** [https://motion.svelte.page/examples/use-animate](https://motion.svelte.page/examples/use-animate)
**Markdown mirror:** [https://motion.svelte.page/examples/use-animate.md](https://motion.svelte.page/examples/use-animate.md)
---
This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page.
## FIG-001: imperative useAnimate.
`useAnimate` returns `[scope, animate]`. Attach the scope to a subtree, then call `animate(selector, props, options)` — sequences, staggers, and selector-driven targets without any `motion.*` components.
**Metadata:** tag: `HOOK` | pattern: `scope + animate(selector)`
### Notes
- Attach the scope to any node with `{@attach scope}`. Now selectors in `animate('li', …)` resolve only within that subtree — the same selector elsewhere on the page is ignored. Auto cleanup on destroy.
- Pass `animate` an array of `[selector, props, options]` tuples to sequence them. Each step starts when the previous finishes unless you override with `at: '-0.2'` (start 200ms before previous ends) or `at: 0` (parallel).
- `stagger(0.08)` in the delay slot fans the animation across matched elements — first `li` starts at 0, next at 80ms, and so on. Same hook handles target-specific beats like the button's pop.
### Source
#### Default.svelte
Source file: [src/lib/examples/use-animate/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/use-animate/demos/Default.svelte)
```svelte