Motion with intent: when animation helps and when it distracts

You open a new website. The logo spins in. Each heading slides up as you scroll. The photos zoom slightly when you hover. A counter ticks from 0 to 10,000. It is all smooth and well made, and after twenty seconds you realise you still don't know what the company sells.

I love motion. I build animated videos and interfaces, and good animation is one of the best ways I know to make an idea click. That is exactly why I am strict about it. Motion is the strongest attention signal on a screen, so every movement should earn its place.

Why motion is so powerful

Our eyes are tuned to notice movement. On a still page, anything that moves wins attention over everything that doesn't. That is useful when the moving thing matters and harmful when it doesn't.

The web's accessibility standard says this directly. WCAG 2.2 requires that anything moving, blinking or scrolling that starts by itself, lasts more than five seconds and sits beside other content must have a way to pause, stop or hide it. The reason it gives for the five-second limit: five seconds "is long enough to get a user's attention" (W3C, WCAG 2.2, 2.2.2). In other words, constant motion pulls attention away from everything else on the page, and the standard treats that as a barrier.

What the research says about animation and understanding

Many designers assume that animating a process (how a heart pumps, how an order moves through a system) explains it better than still pictures. In 2002 Barbara Tversky, Julie Bauer Morrison and Mireille Bétrancourt reviewed the studies behind that belief and reached a sobering conclusion: the evidence for animated graphics over static ones was "not encouraging". In the cases where animation did win, the animated version usually showed more information than the still one, or let people interact with it (Tversky, Morrison & Bétrancourt, 2002).

They gave two reasons animation often fails:

• It is too fast or too complex to see properly. You can't pause your eyes on a moving diagram the way you can on a still one.
• People think in steps. We understand most processes as a sequence of distinct stages, while animation shows a continuous flow.

They also named where animation can do better: helping people follow changes in time and space as they happen, and when it is interactive, so people control the pace (Tversky, Morrison & Bétrancourt, 2002).

That maps neatly onto interface design. Motion helps most when it shows people where something came from and where it went. It hurts most when it plays on its own, for its own sake.

Four jobs motion does well

When I decide whether something should move, I ask which of these jobs it is doing. If it does none of them, it stays still.

1. Showing a change of state

A switch slides from off to on. A heart fills in when you tap it. A button presses down. These tiny movements confirm that your action worked. Without them, people tap twice.

2. Showing where something went

You add a product and it shrinks toward the cart icon. You close a panel and it slides back to the edge it came from. This is the "real-time reorientation in space" Tversky's team described: the motion tells you where to look next and where to find the thing again.

3. Explaining a sequence

A step-by-step explainer that builds a diagram one part at a time works with the way people think in stages. The key word is steps. Each part appears, settles, and stays still long enough to be understood before the next one arrives. Even better, let people click "next" so they control the pace.

4. Showing that the system is working

A progress bar or a subtle loading animation reassures people that nothing has frozen. This is motion as feedback, and it is one of the few cases where movement should continue for a while.

Where motion distracts

• Animating every section on scroll. When every block slides in, none of them stands out, and people who scroll fast see half-empty screens.
• Looping decoration. A rotating badge or a floating shape keeps pulling the eye away from your text. Remember the five-second rule above.
• Slow transitions on frequent actions. A 600-millisecond animation is charming the first time and annoying the fiftieth.
• Motion that hides content. Counters that tick up, text that types itself out, carousels that rotate: the information is there, but people have to wait for it.

How long animations should take

Page Laubheimer of Nielsen Norman Group gives the clearest timing guide I know (Laubheimer, NN/g, 2020):

(ms means milliseconds, so 300 ms is under a third of a second.)

Three more points from the same article:

• Exits should be quicker than entrances. A pop-up might take 300 ms to appear and 200–250 ms to leave.
• Avoid linear motion. Real objects speed up and slow down. Use ease-out, which starts fast and settles gently, for most things entering the screen, and ease-in for things leaving it.
• The more often it happens, the shorter and subtler it should be. Laubheimer also notes that animations are far more often too long than too short.

A worked example: one button, three versions

Here is a "Save" button in a note-taking app, and three ways to animate it.

Version A: no motion. You tap Save. Nothing visibly changes. You aren't sure it worked, so you tap again.

Version B: decorative motion. You tap Save. The button bounces, spins a checkmark for 800 ms, then a confetti burst covers your note. It is fun once. By the tenth save it is in your way.

Version C: motion with intent. You tap Save. The button dips slightly for about 100 ms, the label changes to "Saved" with a quick fade, and a small checkmark appears and stays. The whole thing is over in well under half a second, it confirms the action, and it never covers your work.

Version C is the one people stop noticing, which is the point. Good feedback motion feels like the interface simply responding.

Respect people who turn motion off

For some people, motion is more than a distraction. W3C notes that people with vestibular disorders (conditions of the inner ear that affect balance) can get dizziness, nausea and headaches from movement triggered on screen. The AAA-level criterion 2.3.3 asks that motion triggered by interaction can be switched off, unless the motion is essential (W3C, WCAG 2.2, 2.3.3).

Phones and computers already have a setting for this, often called "Reduce motion". On an iPhone it is under Settings > Accessibility > Motion, and on Android 9 and later it is under Settings > Accessibility > Remove animations (MDN). Websites can read that setting with a CSS media query called prefers-reduced-motion. Here is a pattern you can hand to whoever builds your site:

.card {
  transition: transform 250ms ease-out, opacity 250ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .card {
    /* Keep the fade, drop the movement */
    transition: opacity 150ms ease-out;
    transform: none;
  }
}

The idea follows MDN's own example: when someone has asked for less motion, swap movement such as scaling and sliding for a gentle fade, which changes only opacity.