Motion with a purpose: when animation helps and when it annoys

Open a website and watch what moves. On a good one, almost nothing does, and the few things that do are telling you where to look.

The question every animation has to answer

Before anything on a page is allowed to move, it has to answer one question: what does the visitor understand now that they did not a second ago? If there is an answer, the motion stays. If the only answer is "it looks nice," it goes. That sounds strict, and it is, because every animation costs something. It costs time while the visitor waits for it, it costs battery on a phone, and it costs the attention of a person who came to the page for a reason.

Motion that earns its place

Reveal on scroll. When a section settles in as it enters the screen, the visitor's eye lands on it at the right moment. It is a gentle pointer that says "this is next." We keep it short and subtle, a small rise and a fade, never a swoop in from the side, and it happens once per section. Scroll past the second time and it is simply there.

Counters. A number that climbs to its final value draws attention to the number. On a client report, where the count of rides or leads or completed projects is the headline, a rising counter makes sure the reader actually sees it. The climb takes well under a second. Anything longer becomes a wait.

A live demo in a frame. On a pitch site or a software landing page, a product that moves inside a phone shaped frame is worth more than a paragraph. The visitor watches a rider book a ride or a lead land in a CRM. That is motion doing the job of an explanation.

State changes. A button that darkens when pressed, a form that confirms with a short check mark, a menu that slides open instead of snapping. These small transitions confirm that the thing you did was registered. Without them a page feels broken even when it works perfectly.

Motion that annoys

• Text that types itself out letter by letter. The visitor reads faster than the page can type.
• Backgrounds that drift, pulse or sparkle behind the words you are trying to read.
• Carousels that advance on their own, moving the photo you were looking at before you were done with it.
• Buttons that bounce or wiggle for attention. They get it, and then they lose the trust that came with it.
• Loading animations that play even when the page could have been shown already.
• Parallax effects that make the page feel like it is sliding under your thumb.

None of these teach the visitor anything. They are the website version of a salesperson who will not stop talking.

The reduced motion setting

Every phone and computer has a setting a person can switch on that says, in effect, "please keep things still." People turn it on because motion makes them dizzy, or because it distracts them, or simply because they prefer it. Every site we build checks for that setting, and when it is on, the reveals become plain appearances, the counters become plain numbers, and the transitions become instant. The page works the same way; it just holds still. We treat this as basic courtesy, not an extra.

How we keep ourselves in line

1. We design pages without motion first. If a page does not work standing still, animation will not rescue it.
2. We add motion last, one effect at a time, and watch each one on a real phone rather than a fast laptop.
3. We time everything short. If a person could notice they are waiting, it is too long.
4. We test with reduced motion switched on and confirm nothing is lost.
5. We ask the owner to scroll the page while we watch. If their eye goes where the motion points, it stays. If it does not, it goes.

The hardest part is saying no to effects that look impressive in a demo. A page full of movement feels alive for the first ten seconds and tiring after that, and a prospect comparing three contractors will spend longer than ten seconds. Quiet wins.

A still page with a few deliberate movements is what we build for a cabinet shop's gallery, a resort's shuttle pitch, and the dashboard a university opens every Monday.

Questions people ask