The Animation You Should Let People Turn Off

Animation can make a website feel alive. Sections fade in as you scroll, images drift slowly in the background, cards tilt as you move the pointer. Done well, it adds polish and helps people understand what's happening on screen. For some people, though, it does something else entirely. It makes them feel dizzy, nauseous or unable to concentrate.

People with vestibular disorders, which affect the inner ear and balance, can be badly affected by motion on screen, especially large movements, parallax and zooming. Others find movement distracting, including some people with attention-related conditions. For them, an animated website isn't delightful. It's a reason to leave.

The setting that already exists

Phones, tablets and computers all have a setting to reduce motion. People who need it switch it on once, and it applies across their device. Websites can read that preference and respond to it. That makes the fix unusually simple: the person has already told us what they need. We just have to listen.

Every site we build checks this setting. When it's switched on, the motion changes.

Reduce, don't remove

Reducing motion doesn't mean stripping out every transition. Some motion is useful. A menu that fades in rather than appearing instantly is easier to follow. A small change of colour when a button is pressed confirms the action. Removing all of that would make the site harder to use, not easier.

So we sort animations into two groups. Large movements, such as parallax backgrounds, elements sliding in from off-screen, zooms, auto-playing carousels and anything that moves while the person is scrolling, are switched off or replaced. Small, functional transitions, like a gentle fade or a colour change, usually stay, sometimes shortened.

Designing both versions

The reduced version has to be designed, not just left over. If content normally slides into view as you scroll, it needs to appear in its final position without the slide, never stay hidden. If a hero section relies on a moving background for impact, the still version needs to look intentional, with a strong image or layout of its own.

We review both versions with the client. It's often a pleasant surprise how good the calmer version looks, and occasionally it leads to dialling down motion for everyone.

Things that move on their own

Motion that starts without the visitor doing anything needs extra care. Carousels that rotate automatically, background videos and animated illustrations should be possible to pause, regardless of any device setting. The accessibility guidelines ask for a way to pause, stop or hide anything that moves for more than five seconds. We make those controls easy to find, not tucked into a corner.

We're also careful with flashing. Content that flashes more than three times a second can trigger seizures in some people, so we avoid it entirely.

Motion with a purpose

The best protection is to use less motion in the first place. Every animation we add has to explain something: where an element came from, what changed, what to do next. Motion for its own sake tends to get cut, both because it can make people unwell and because it slows everyone down. We covered our wider thinking on this in an earlier post on motion and restraint.

Testing with the setting on

Our checks include switching on reduced motion on real devices and using the site that way. It takes a few minutes and quickly shows anything we missed, like a section that never appears or a transition that still swoops across the screen.

Respecting this setting is a small amount of work that makes a big difference to the people who need it. It's standard in our website design and build. If your site moves a lot and you're not sure how it behaves with reduced motion switched on, we can check.