7 Things to Decide Before Adding Motion

How do you decide when and how to add animation to a UI? First decide whether the motion is needed, then keep it short, animate only transform and opacity, use set durations and easing curves, allow interruption, and respect reduced motion.

Decide whether to animate at all before anything else. Effects on actions seen dozens of times a day get annoying fast.

How to use it

Ask first: does this motion show where something came from and where it went? If not, remove it.
Keep actions used dozens of times a day (tab switches, list scrolling) short or without motion. Save big effects for rare events (a first completion, a successful payment).
Animate only position (transform) and opacity. Animating size or margin makes the screen stutter.
Duration guide: button response 100 to 150ms, small element entering 150 to 250ms, screen transition 250 to 400ms. Past 400ms it feels slow.
Curve guide: ease-out when entering, ease-in when leaving, and a spring for things you drag and release by hand.
It must be interruptible. If the user taps close while something is opening, it should reverse from where it is.
For people who turned on "reduce motion" on their device, show a fade instead of movement.

Prompts to copy

Apply motion rules

Clean up the animations on this screen using the rules below.
- Animate only transform and opacity. Do not animate width, height, top or left.
- Button press 120ms, small element entrance 200ms ease-out, screen transition 300ms.
- Keep effects minimal on frequent actions (tab switches, lists).
- If the user closes something while it is opening, it should reverse from where it is (cancellable midway).
- If prefers-reduced-motion is on, use only an opacity fade with no movement.