# useAnimationControls > Legacy imperative animation controls for coordinating one or more motion components with start, set, and stop. **Source:** [https://motion.svelte.page/examples/use-animation-controls](https://motion.svelte.page/examples/use-animation-controls) **Markdown mirror:** [https://motion.svelte.page/examples/use-animation-controls.md](https://motion.svelte.page/examples/use-animation-controls.md) --- This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page. ## FIG-001: shared animation controls. `useAnimationControls()` returns a controls object for `animate={controls}`. Call `start`, `set`, or `stop` once and every subscribed motion component responds with its own matching variant. **Metadata:** tag: `HOOK` | pattern: `controls.start(label)` ### Notes - `await controls.start('launch')` resolves after every subscribed `motion.*` component finishes its matching `launch` variant. - `controls.set('verified')` jumps all subscribers to the final keyframe values synchronously, including `transitionEnd` values. - `controls.stop()` freezes active element animations and is also called automatically when the hook's component unmounts. ### Source #### Default.svelte Source file: [src/lib/examples/use-animation-controls/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/use-animation-controls/demos/Default.svelte) ```svelte
// use-animation-controls status: {status}
({ width: 230, display: 'grid', gap: '0.875rem', padding: '1.125rem', border: '1px solid var(--brut-ink, #0a0a0a)', background: 'var(--brut-bg-2, #eef4f1)', boxShadow: '6px 6px 0 var(--brut-rule, #d6dedb)', transformOrigin: '50% 50%' }))} >
({ fontFamily: 'var(--brut-mono, monospace)', fontSize: '1.125rem', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.04em', color: 'var(--brut-accent, #247768)' }))} > {status}
({ width: '100%', height: 8, background: 'var(--brut-accent, #247768)', transformOrigin: '0 50%' }))} />
run {count} ({ width: 34, height: 34, display: 'grid', placeItems: 'center', border: '1px solid var(--brut-accent, #247768)', background: 'var(--brut-accent-soft, rgba(36, 119, 104, 0.1))', color: 'var(--brut-accent, #247768)' }))} >
one controls object, four targets runs: {String(count).padStart(2, '0')}
```