Motion, Animation and People Who Cannot Watch It

What motion does to some people

Large or unexpected movement on screen can cause dizziness, nausea, disorientation, and headaches in people with vestibular disorders, and the effect is physical rather than a matter of taste.

Somebody who has to close a page and sit down for ten minutes is not being fussy about design.

The group is larger than most people assume, and it includes anybody with migraine sensitivity, some concussion recovery, and a proportion of the general population who simply find heavy movement unpleasant without ever naming why.

They will not tell you. They will leave, and it will look like an ordinary bounce.

The kinds that cause trouble

• Parallax, where layers move at different speeds while scrolling.
• Full-screen movement triggered by scrolling.
• Automatic sliders that advance on their own.
• Background video playing behind text.
• Zooming or spinning transitions between sections.
• Anything large that moves without being asked.

Small movements are generally fine. A button that changes colour, a subtle fade, or a short transition on a menu causes almost nobody difficulty.

The problem is scale and control: large, unexpected, and unstoppable.

People have already told their device

The most useful thing to know here, because it means you do not have to add a control of your own.

Every current operating system, desktop and mobile, has a setting for reducing motion, and people who need it have almost certainly already turned it on.

Browsers pass that preference to websites, and a site can respond to it.

Which means the correct behaviour is not to ask, and not to add a toggle nobody will find. It is to check what the visitor has already declared and honour it.

Somebody who has set this on their phone has done so because they need it, and a site that ignores it is overriding a decision they made deliberately.

Honouring the setting

Technically this is a media query in your stylesheet, and it is one of the smaller pieces of work in accessibility.

Where the preference is set, reduce or remove animation: no parallax, no automatic slide transitions, no scroll-triggered movement, and transitions either very short or absent.

The page should still work and still look like itself. You are removing motion, not features.

Most modern themes and page builders now include support for this, sometimes as a setting rather than code, so it is worth checking whether yours already has it before commissioning anything.

Test it by turning the setting on in your own operating system and reloading the site, which takes a minute and tells you immediately whether anything is listening.

Anything that moves must be stoppable

A separate requirement that applies regardless of the preference setting.

Content that moves, scrolls, or updates automatically for more than a few seconds needs a way to pause it.

That covers automatic sliders, scrolling news tickers, animated statistics that count up, and background video.

A pause control has to be visible, reachable with a keyboard, and actually work, which is worth testing because a surprising number of slider components include a control that does nothing.

The simpler answer for most business sites is to remove automatic advancing entirely, since sliders that advance on their own perform badly for other reasons as well.

A worked example

A design studio had a homepage built around scroll-driven animation: sections slid in from the sides, a background image moved at a different speed, and figures counted up as they appeared.

A prospective client told them, in a polite email that clearly took some effort to write, that they had been unable to look at the site long enough to read it.

The studio added the reduced motion media query, which took under an hour, and removed the parallax on the banner entirely for everybody.

With the preference set, the page loads without movement and reads normally.

Nothing about the design was compromised for anybody else, and the person who wrote to them became a client.

Their view afterwards was that one email had probably represented a good number of people who had simply closed the tab.

Parallax is the specific problem

Worth singling out because it is both the most popular effect of the last decade and the most reported cause of difficulty.

The issue is that different parts of the screen move at different rates, which is a visual signal the brain associates with self-motion, and the mismatch with a stationary body is what produces nausea.

It is not a matter of degree in the way a fade is. Even a modest parallax on a large background image affects people.

If you want one effect to remove from a site on this basis, remove that one. It is also frequently a performance cost, which makes the decision easier.

Flashing content

A different and more serious category, worth stating plainly.

Content that flashes more than three times a second can trigger seizures in people with photosensitive epilepsy.

This is rare on business sites and appears occasionally in video content, animated advertising, or a badly configured effect.

The rule is absolute rather than a preference: nothing should flash at that rate, and there is no setting that makes it acceptable.

If you accept advertising on your site, this is worth checking, since you do not control what appears in the slot.

What is worth keeping

Motion is not the enemy and removing all of it makes interfaces worse.

Small transitions help people understand what just happened: a panel that slides open rather than appearing, a menu that expands, a confirmation that fades in.

Those reduce confusion, particularly for people with cognitive difficulties, and they should be kept.

The distinction is purposeful versus decorative. Movement that explains a change in state earns its place. Movement that exists to make a page feel expensive does not, and it is the second kind that causes harm.

The counter-case

There are sites where motion is the product.

A studio showing animation work, a game, or anything where the movement is what the visitor came to see cannot remove it without removing the point.

Even there, the reduced motion preference should be honoured on the surrounding interface: the navigation, the page transitions, and the way content arrives, while the work itself plays when somebody chooses to play it.

And a warning before something starts, with a control to stop it, respects a visitor's choice in a way that autoplay does not.

The requirement is control rather than absence, and that is achievable on almost any site.

The check

1. Turn on reduced motion in your own system settings.
2. Reload your site and see whether anything changed.
3. Remove parallax from large background images.
4. Stop sliders advancing automatically.
5. Add a working pause control to anything that must move.
6. Keep small transitions that explain a change.
7. Check nothing flashes rapidly, including adverts.

Steps one and two take two minutes and tell you whether your site listens to anybody.

Sliders in general are covered in the slider nobody scrolls past.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.