Purposeful Motion in Web Design

Motion is one of the most powerful tools in web design and one of the easiest to misuse. Used well, it makes an interface easier to understand. Used carelessly, it slows people down, distracts them, and in some cases makes them feel unwell.

Our rule is simple: every animation has to answer the question "what does this help the visitor understand?" If there is no good answer, it does not ship.

Guiding attention#

The eye is drawn to movement before almost anything else. That makes motion a strong way to point at something, and a poor choice for decoration.

Good uses include:

• Drawing the eye to a confirmation message after a form is sent.
• Highlighting a newly added item in a basket or list.
• Revealing the next step in a multi-step process.

Movement should happen in one place at a time. If three things animate at once, none of them gets noticed.

Clarifying relationships#

Some of the most useful motion is the kind you barely notice. It shows where things come from and where they go.

Origin and destination#

When a menu slides in from the edge of the screen, it tells you where it lives, and where it will go when you close it. When a card expands into a full detail view, the movement shows that the two are the same thing at different sizes. For example, a product gallery might grow a thumbnail into the main image, so the shopper never loses track of which photo they picked.

Cause and effect#

A button that compresses slightly when pressed, or a toggle that slides across, confirms that an action registered. These responses should be fast enough to feel like part of the click, not something to wait for.

Continuity between states and pages#

Abrupt changes make people reorient themselves. A short transition between states, such as filtering a list or switching tabs, helps them keep their place. Between pages, a gentle fade or a shared element can make a site feel like one connected space.

Keep it short: a transition that outlasts the content's load time adds delay, not continuity.

Restraint#

If you notice the animation before you notice the content, the animation is too loud.

Restraint separates refined motion from noise. In our interactive experiences work, we define a small set of motion rules early:

1. A few durations. For example, fast for small feedback, medium for panels and menus, slower only for large, deliberate moments.
2. One or two easing curves. Things should accelerate and settle in a consistent way across the site.
3. A clear list of what moves. Scroll-triggered effects on every section quickly become tiring; save them for the moments that matter.

Performance#

Motion that stutters feels worse than no motion at all. Smooth animation is mostly about choosing what to animate.

• Animate transform and opacity. Browsers can usually animate these without recalculating layout, so they stay smooth even on modest phones.
• Avoid animating layout properties such as width, height, top or margin. Changing them forces the browser to rework the layout on every frame, which is where jank comes from.
• Do not read and write layout in a loop. Measuring an element and then changing its style repeatedly in the same frame causes layout thrashing. Batch your measurements, then apply changes.
• Keep the page responsive. Animation should never block scrolling, typing or clicking. If someone acts mid-animation, the interface should respond immediately.

Accessibility#

For people with vestibular disorders, large movements, parallax and zooming can trigger dizziness or nausea. Accessible motion is not optional, and it is not difficult.

Respect reduced motion settings#

Operating systems let people ask for less motion, and browsers expose that preference through the prefers-reduced-motion media query. We build every site to honour it. A simple starting point looks like this:

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

This is a safety net, not the whole answer. Where a transition carries meaning, we swap large movement for a simple fade. The W3C's guidance on animation from interactions is a useful reference.

Other essentials#

• Never put essential information only in motion. If an animation is the only way to learn that something changed, add a visible or announced message too.
• Avoid flashing. Rapid flashes can trigger seizures. Keep anything that blinks slow and small, or remove it.
• Keep focus visible. Animated menus, modals and carousels must still show clearly where keyboard focus is, and move focus sensibly when they open and close.
• Give people control. Anything that moves on its own for more than a few seconds, such as a carousel or background video, needs a way to pause it.

Motion with a job to do#

The best motion is easy to overlook because it simply makes things clearer. It points to what matters, connects one state to the next, runs smoothly, and steps back for anyone who prefers less of it. If every animation on a site has a reason to exist, the site will feel more polished, and more considerate, for it.