Developing animation taste
The gap between knowing the API and knowing when to use it
Taste is not subjective preference. It's trained instinct. The kind that flinches at a bouncy modal on a delete confirmation.
## The intent test
Before choosing parameters, ask: _what is the user trying to do?_
Apple Maps shows the active route without unlocking the phone. It inferred the driver wants directions. Vercel's env input detects a pasted `.env` block and offers to parse it. It inferred someone pasting multiple lines isn't filling one field.
Motion should match predicted intent, not the literal event. A settings gear opens fast, from the trigger, no drama. A milestone after weeks of work gets confetti and personality.
Same product. Same library. Different motion.
## Interaction metaphors
Every gesture has a physical-world metaphor:
- **Swipe** = page turn. Directional, reveals what's underneath.
- **Pinch** = precision zoom. Same motor pattern as picking up a small object.
- **Long press** = careful selection. Weight and commitment.
- **Drag** = physical manipulation. Must feel attached to your finger. Any lag shatters it.
A swipe that fades instead of sliding breaks the page-turn metaphor. A drag that doesn't track the pointer breaks direct manipulation.
## The weight of the action
}
/>
Heavy actions (delete, payment, account changes) get critically damped springs. Fast, no overshoot. Light actions (toggling a preference, dismissing a tooltip) can afford more personality.
}
/>
## The novelty tax
Every "creative" animation carries a learning cost. Josh Miller from The Browser Company calls this the _novelty tax_. People can only absorb so much new behaviour before they give up.
Novel animations must be learnable within one interaction. If a user has to do it twice to understand the response, it's too clever. Standard patterns are free. Every departure costs attention.
## How to train
1. **Pick one product per week.** Use it slowly. Trigger every interaction. Notice what animates and what stays still.
2. **Name what you see.** "The popover scales from 0.95 with a 200ms ease-out." Naming forces precision.
3. **Compare two apps doing the same thing.** iOS Notes vs Bear. Linear vs Jira. The gap is taste. Name it.
4. **Slow it down.** Screen-record, play at 0.25x. A dropped frame or mismatched curve becomes obvious.