21 · Calm that informs
Motion
In a medical tool, motion has one job: to show what changed. Brief, smooth and easy to turn off.
Transition test
Adjust the duration and turn on “reduce motion” to see how the same transition behaves.
Notice sliding in
Appointment saved
Panel unfolding
Appointment details
Time change
9:00
Curve and durations
cubic-bezier(.2, 0, 0, 1): starts quickly and settles without bounce.- Micro (focus, hover)
- 100 to 150 ms
- Notice, unfold
- 200 ms
- Panel or dialog
- 240 ms
- Maximum
- 300 ms. Nothing animates longer
- Exit
- 20% shorter than the entrance
- Curve
- Always the same; no bounce or elastic effects
Reduce motion
- What is respected
- The system
prefers-reduced-motion: reducesetting, and a setting of its own in the app. - What is removed
- Slides, scaling and parallax. What remains is 100 ms fades or instant changes.
- What never animates
- Flashes faster than 3 per second, bounces, countdown clocks, confetti.
- Loading
- A single bar or a static indicator with text: “Saving…”.
- Autoplay
- No video or animation starts on its own. If one exists, it can be paused.
Do
- Animate a change so it does not go unnoticed
- Keep focus where it was after a transition
- Test with “reduce motion” turned on
Don't
- Animate for decoration whenever a screen opens
- Move content under a finger while someone is trying to tap it
- Celebrate a save with confetti or sounds