Key insights
- Entrances land best at 200–300ms with a cubic ease-out — fast enough to feel responsive, slow enough to read as deliberate.
- Exits should be faster than entrances: pair a 250ms entrance with a ~150ms exit so dismissals feel snappy instead of dragging.
- Feedback on taps and button presses must fire in under 100ms — anything slower reads as lag, even when the action itself is instant.
- Attention-grabbing motion like notifications can run longer, 500–800ms, and use a bounce or overshoot to pull the eye.
- Stagger list items about 50ms apart — 30ms blurs them into one blob, 100ms makes the whole list crawl in.
- Match the easing curve to intent: ease-out for entrances, and reserve springs and bounce for moments that genuinely need attention.
Do / Don't
- Do: Use ease-out curves for entrances so motion decelerates into place
- Do: Make exits roughly 40% faster than their entrance so dismissals feel instant
- Do: Keep tap and press feedback under 100ms so the interface feels alive
- Don't: Stretch entrances past ~300ms — they start to feel sluggish and in the way
- Don't: Use symmetric in/out timing — a matched-length exit feels like the UI is dragging
- Don't: Reach for linear easing on entrances — it reads mechanical and cheap
