Motion with a purpose: transitions that help

Animation on websites has a reputation problem. Many of us have scrolled through pages where every heading slides in, every image fades up and the whole thing feels like wading through treacle. That kind of motion is decoration for its own sake, and it tends to make sites feel slower and harder to use.

Used well, though, motion is a genuinely useful design tool. It can explain what just happened, show where something went and make an interface feel responsive. The difference lies in purpose.

Ask what the motion explains

Before adding any animation, finish this sentence: "This motion helps the visitor understand that..."

Good answers sound like:

• "...the menu has opened from the button they just pressed."
• "...the item was added to their basket."
• "...this panel can be expanded and collapsed."
• "...their form is being sent and they should wait."

Weak answers sound like:

• "...the page is modern."
• "...the section has arrived."
• "...we have a creative brand."

If you can't finish the sentence with something useful, the animation probably isn't needed.

Where motion genuinely helps

Feedback on interaction

When someone presses a button, a small immediate response confirms the press registered. A slight change in shade or a subtle press-down effect does this. Without it, people sometimes tap twice, which can submit a form twice or add two of something to a basket.

Showing relationships and direction

Motion can connect cause and effect. A side panel that slides in from the right, where its trigger sits, tells the visitor where it came from and where it will go when closed. An accordion that smoothly expands shows that the new content belongs to the heading above it, rather than appearing as a jarring jump.

Preserving context during change

When content changes in place, such as filtering a gallery of wedding venues by region, a brief transition helps visitors track what stayed, what left and what arrived. An instant swap can leave people wondering whether anything happened at all.

Indicating progress and waiting

A spinner, a progress bar or a gently pulsing placeholder tells people the site is working. For a booking form that takes a couple of seconds to confirm, a button that changes to "Booking..." with a small loading indicator is far more reassuring than a frozen screen.

Drawing attention, sparingly

A gentle highlight on a newly added notice or a field with an error can guide the eye. The key word is sparingly. If several things are moving at once, none of them stand out.

Where motion gets in the way

Scroll-triggered entrances on everything

Having every block fade or slide in as you scroll makes content feel delayed. Readers who scroll quickly end up looking at half-empty sections waiting for text to arrive. If you love the effect, limit it to one or two moments on a page, and keep it quick.

Long durations

Animations that last close to a second or more feel slow, especially on actions people repeat. A visitor opening and closing a menu ten times will become impatient with a lengthy slide.

Motion that blocks interaction

If people can't click anything until an intro animation finishes, the animation is now a barrier. Content should be usable immediately.

Large, sweeping movement

Big parallax effects, zooming backgrounds and full-screen sliding can cause discomfort, dizziness or nausea for people with vestibular disorders. Even for others, they can be distracting.

Choosing duration and easing

Two settings shape how motion feels: how long it lasts and how it accelerates.

Duration

There's no single correct number, but some rough guidance is widely used:

• Small feedback such as button presses and hover changes: very short, roughly 100 to 150 milliseconds.
• Medium transitions such as dropdowns, accordions and tooltips: around 150 to 300 milliseconds.
• Larger movements such as panels sliding across the screen: perhaps 250 to 400 milliseconds.

Larger distances can take slightly longer, but if something feels sluggish, shorten it. It's rare to hear that a menu opened too quickly.

Easing

Things in the physical world don't start and stop instantly. Easing curves imitate this. Some practical defaults:

• Ease out (fast start, gentle stop) for elements entering the screen. It feels responsive because the movement begins immediately.
• Ease in (gentle start, fast end) for elements leaving. They get out of the way smartly.
• Ease in out for elements moving from one place to another on screen.

Avoid linear easing for most interface movement; it tends to feel mechanical. Bouncy, springy curves can be charming in a playful brand, like a children's party entertainer, but they quickly feel silly on a solicitor's site.

Respect reduced motion preferences

Operating systems let people ask for reduced motion, and browsers expose this preference to websites. Honouring it is straightforward and important.

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

This broad approach effectively turns off most animation for people who've asked for it. A more refined version keeps tiny, non-moving feedback such as colour changes and removes only movement, scaling and parallax. Either way, nothing on your site should depend on animation to make sense. Removing motion should leave every piece of information intact.

Keep motion cheap to run

Animation can stutter on older phones if it moves the wrong properties. Changes to transform and opacity are generally smooth, because browsers can handle them efficiently. Animating width, height, margins or top and left positions forces the browser to recalculate layout repeatedly and can cause jank. When you want something to grow or slide, scale or translate it rather than changing its size or position directly.

Also avoid autoplaying background videos purely for atmosphere. They cost data and battery and rarely explain anything.

A short motion audit

Walk through your site and note every moving thing. For each one, ask:

1. What does this motion help the visitor understand?
2. Is it fast enough that a repeat visitor won't mind it?
3. Does it use sensible easing for entering, leaving or moving?
4. Does the page still make sense with motion switched off?
5. Is it animating transform and opacity rather than layout properties?
6. Is it the only thing moving at that moment?

Remove anything that fails the first question, then tune the rest.

Motion done this way is almost invisible. Visitors won't remember your transitions; they'll simply find your site clear and responsive, which is exactly the point.