How to Ask for Animations

Why animation requests go wrong

Animation is hard to describe with words. "Smooth", "snappy" and "fluid" mean different things to different people, and to agents. A common result: everything moves, the page feels slow, or the animation starts over every time you change a setting.

The fix: describe an animation like a short story with a beginning, middle and end.

The five questions

Every animation can be described with five answers.

1. What moves? The exact element: "the card", "the menu icon", "the whole hero image".
2. What starts it? Page load, scroll, mouse over, click, drag, or release.
3. What changes? Position, size, rotation, opacity (how see-through it is) or color.
4. How long, and how does it slow down? A time in milliseconds, and an "easing" (see below).
5. What happens at the end? Does it stay, go back, repeat, or stop?

A quick guide to timing

• 100 to 200 ms: small reactions, like a button press. Feels instant.
• 200 to 400 ms: most interface movement, like menus opening. Feels smooth.
• 400 to 700 ms: bigger moments, like a section appearing. Feels calm.
• Over 1 second: only for special effects. Users may feel they are waiting.

A quick guide to easing

Easing is how the speed changes during the animation.

• Ease-out: starts fast, ends slow. Good for things that appear. Use this most of the time.
• Ease-in: starts slow, ends fast. Good for things that leave the screen.
• Ease-in-out: slow, fast, slow. Good for things that move from one place to another.
• Linear: the same speed all the time. Looks mechanical. Good only for loading spinners or things that loop.
• Spring: goes a little past the end, then settles. Feels playful. Use carefully.

The worksheet

Copy this and fill in one block per animation.

ANIMATION NAME: [for example "card lift"]

WHAT MOVES: [element]
WHAT STARTS IT: [load / scroll / hover / click / drag / release]
WHAT CHANGES: [from ... to ..., for example "moves up 4 pixels, shadow gets bigger"]
HOW LONG: [milliseconds]
EASING: [ease-out / ease-in / ease-in-out / linear / spring]
AT THE END: [stays / goes back when the mouse leaves / repeats / stops]

ON PHONES: [same / simpler / none]
REDUCED MOTION: [what happens when the user turned off animations in their system settings]
DO NOT: [for example "do not move other elements", "do not restart when settings change"]

Drag, release, reset

Things you can drag (sliders, carousels, cards you swipe) need three extra answers:

• While dragging: the element follows the finger or mouse directly, with no delay.
• On release: does it stay where you let go, snap to the nearest point, or slide a bit further and slow down?
• Reset: is there a way to go back to the start? A button, a double click, or nothing?

Settings that change a moving scene

If your page has controls that change an animation (speed, color, size), say this clearly:

When I change a setting, update the animation smoothly from where it is now. Do not restart the animation from the beginning.

Agents often rebuild the whole scene on each change, and the animation jumps back to the start. This one sentence prevents it.

Respect reduced motion

Some people get dizzy or sick from movement. Their computer or phone has a setting to reduce motion. Always add:

If the user has reduced motion turned on, replace movement with a simple fade, or show the final state with no animation.

Three full examples

Button press:

When the "Buy now" button is pressed, it shrinks to 97% of its size over 100 ms with ease-out. When released, it goes back to 100% over 150 ms. Nothing else moves.

Section on scroll:

When the "Features" section first comes into view, each of the three cards fades in and moves up 16 pixels, one after another, with 80 ms between them. Each card takes 400 ms with ease-out. This happens only once. With reduced motion, the cards appear with no movement.

Menu:

When the menu icon is clicked, the menu slides in from the right over 300 ms with ease-out, and the page behind gets a 40% dark overlay. Clicking the overlay or pressing Escape closes it over 200 ms with ease-in.

Check before you send

• I answered the five questions for each animation.
• Every time is in milliseconds.
• I said what happens with reduced motion.
• For draggable things, I described drag, release and reset.
• I said what must not move or restart.