# whileHover variant keys > Pass a variant key (or array) to whileHover, whileTap, whileFocus, whileDrag, or whileInView to reuse named animation states across gestures. **Source:** [https://motion.svelte.page/examples/variants-while-hover](https://motion.svelte.page/examples/variants-while-hover) **Markdown mirror:** [https://motion.svelte.page/examples/variants-while-hover.md](https://motion.svelte.page/examples/variants-while-hover.md) --- This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page. ## FIG-001: inline keyframes. Pass an object directly to whileHover / whileTap. Right for one-off interactions — the animation is co-located with the element that uses it. **Metadata:** tag: `INLINE` | form: `inline-keyframes` ### Notes - Best for one-off interactions where the animation only applies to a single element and won't be reused. - Repeat the object on every element if you need the same animation in multiple places — that duplication is the smell that pushes you toward the variant-key form below. ### Source #### InlineForm.svelte Source file: [src/lib/examples/variants-while-hover/demos/InlineForm.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/variants-while-hover/demos/InlineForm.svelte) ```svelte

// inline keyframes whileHover={'{{ ... }}'}

({ width: '200px', height: '120px', padding: '1rem', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', border: '1px solid var(--brut-accent, #247768)', backgroundColor: 'var(--brut-accent-soft, rgba(36, 119, 104, 0.1))', boxShadow: '6px 6px 0 var(--brut-rule, #d6dedb)', color: 'var(--brut-ink, #171717)', fontWeight: 600, fontSize: '0.875rem', cursor: 'pointer' }))} > hover or tap me inline object

hover · tap hover: 1.06 / tap: 0.96

``` ## FIG-002: variant key. Name the state on `variants`, reference it by string from any gesture prop. The same `"hovered"` key drives `whileHover`, and could just as easily drive `whileFocus`, `whileDrag`, or `whileInView`. **Metadata:** tag: `VARIANT` | form: `variant-key` ### Notes - Define the state once on `variants`; any gesture prop on the same element (or its descendants) can pull from the same map by key. - Works with `whileHover`, `whileTap`, `whileFocus`, `whileDrag`, and `whileInView`. Pass a single string or an array of keys (later entries override earlier ones). ### Source #### VariantKey.svelte Source file: [src/lib/examples/variants-while-hover/demos/VariantKey.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/variants-while-hover/demos/VariantKey.svelte) ```svelte

// variant key whileHover="hovered"

hovered · pressed one map, any gesture

```