# Hover and Tap > Gesture-driven animations for hover and tap interactions using Svelte Motion. Create responsive, interactive elements with spring physics. **Source:** [https://motion.svelte.page/examples/hover-and-tap](https://motion.svelte.page/examples/hover-and-tap) **Markdown mirror:** [https://motion.svelte.page/examples/hover-and-tap.md](https://motion.svelte.page/examples/hover-and-tap.md) --- This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page. ## FIG-001: hover + tap gestures. `whileHover` and `whileTap` are temporary animation states that blend in while a pointer is over (or pressing) the element. Release returns to the resting state automatically. **Metadata:** tag: `GESTURE` | pattern: `gesture overlay` ### Notes - `whileHover` takes effect when the pointer enters the element and lifts back to `animate` when it leaves. Here it scales the square to 1.2x — a lift-and-grow common to clickable cards. - `whileTap` overrides `whileHover` while the pointer (or touch) is held down — scale 0.8 reads as a press. Release re-applies hover until the pointer leaves. - These overlays compose without any state plumbing — no `$state` flag, no event handlers. Same idea works for opacity, rotation, colour, or any animatable prop. ### Source #### Default.svelte Source file: [src/lib/examples/hover-and-tap/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/hover-and-tap/demos/Default.svelte) ```svelte
// hover and tap gesture: pointer
({ width: '100px', height: '100px', 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)', cursor: 'pointer' }))} >
hover · tap hover: 1.2 / tap: 0.8
```