# Variants Basic > Define and switch between named animation states with Svelte Motion variants. Create reusable, declarative animation presets for components. **Source:** [https://motion.svelte.page/examples/variants-basic](https://motion.svelte.page/examples/variants-basic) **Markdown mirror:** [https://motion.svelte.page/examples/variants-basic.md](https://motion.svelte.page/examples/variants-basic.md) --- This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page. ## FIG-001: named variants. A `variants` map gives you named animation states. Pass the label string to `animate` and motion looks it up and tweens there — the workhorse pattern for any binary toggle. **Metadata:** tag: `VARIANTS` | pattern: `open/closed toggle` ### Notes - Each variant is an animation target object keyed by a label. The shape is identical to what you'd pass to `animate={'{ opacity, scale, … }'}` directly — variants are just a way to name those targets. - `animate={'{isOpen ? "open" : "closed"}'}` swaps between labels. Motion tweens between the two variant objects automatically — no need to spread the props manually or duplicate the transition config. - The real power kicks in when the parent's variant cascades into descendants — every child `motion.*` with matching variant keys animates together. See `variants-propagation` for that. ### Source #### Default.svelte Source file: [src/lib/examples/variants-basic/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/variants-basic/demos/Default.svelte) ```svelte

// variants-basic animate: "{isOpen ? 'open' : 'closed'}"

({ fontFamily: 'var(--brut-mono, monospace)', fontSize: '0.8125rem', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em', padding: '1rem 2rem', border: '1px solid var(--brut-accent, #247768)', backgroundColor: 'var(--brut-accent-soft, rgba(36, 119, 104, 0.1))', color: 'var(--brut-accent, #247768)', cursor: 'pointer' }))} {variants} initial="closed" animate={isOpen ? 'open' : 'closed'} transition={{ type: 'spring', stiffness: 300, damping: 20 }} onclick={() => (isOpen = !isOpen)} > {isOpen ? 'Open' : 'Closed'}

spring: 300 / 20 tap to toggle label

```