# useCycle
> Cycle through animation variants in Svelte. useCycle returns a $state-backed { current, cycle } object for toggling motion states with Svelte 5 runes.
**Source:** [https://motion.svelte.page/examples/use-cycle](https://motion.svelte.page/examples/use-cycle)
**Markdown mirror:** [https://motion.svelte.page/examples/use-cycle.md](https://motion.svelte.page/examples/use-cycle.md)
---
This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page.
## FIG-001: cycling variants.
`useCycle(...labels)` returns a `{ current, cycle }` object. Read `variant.current` to drive `animate=`, call `variant.cycle()` to advance, or `variant.cycle(i)` to jump to a specific label. Pair it with a `variants` map and motion handles the transitions.
**Metadata:** tag: `HOOK` | pattern: `finite-state cycle`
### Notes
- `cycle()` with no args advances to the next label, wrapping around at the end. It's the simplest way to build a multi-state toggle without writing your own modulo arithmetic.
- `cycle(i)` jumps directly to the label at index `i`. Useful for tab-bar-style controls where each button maps to a specific state — no need for a separate selected-index `$state` cell.
- The motion target reads `animate={'{variant.current}'}` (a string label), so motion resolves it via `variants`. Pure declarative: state lives in the cycle object, animations live in the variants map.
### Source
#### Default.svelte
Source file: [src/lib/examples/use-cycle/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/use-cycle/demos/Default.svelte)
```svelte