Shots in this scene
Who Motion Hurts
In one line
Large movement on a screen can make people with vestibular disorders, migraine or attention differences feel unwell or unable to read. A few kinds of motion cause most of the harm, and quiet changes such as opacity and colour are usually safe.
Think of it like this
Reading a book in the back of a moving car makes some people sick. Their eyes say "I am still, the page is still", while their inner ear says "we are turning", and the two messages disagree. A screen can start the same fight the other way round: the eyes see the whole view sliding or zooming, and the inner ear feels nothing move.
Words you'll meet
New words in this topic, in plain English. Come back here whenever one feels fuzzy.
- vestibular disorder
- A problem with the balance system in the inner ear and brain. Large screen movement can cause dizziness, nausea and headaches.
- parallax
- Layers of a page moving at different speeds as you scroll, to suggest depth.
- scroll-jacking
- Code that takes over scrolling so the page moves in a way the visitor did not ask for or cannot control.
- reduced motion
- A device setting that asks apps and pages for less movement (Topic 7.2 shows how to read it).
Step by step
01Meet Ravi's rule
Ravi has two settings switched on: his phone's "reduce motion" and a screen reader he uses on bad days. His rule for the team is short: movement may help, but it must never take over the view.
From now on every animation in this course has a calm version. The calm version is nearly always a fade.
02Sort motion by what moves
Ask one question: does this change the position or size of something? Slide, zoom and spin do. Fade, colour and blur do not.
Then ask how big the thing is and how fast it goes. A 36-pixel box moving 130 px is a small risk. A full-width panel flying in from the side in a quarter of a second is a large one.
03Check scroll-linked motion twice
Anything tied to scrolling needs extra care, because the person controls the speed but not the direction of the effect. A layer that moves at half speed is gentle. A layer that moves against the scroll is one of the listed triggers.
04Pick the quiet version for the default
When in doubt, make the quiet version the default and the big movement an extra for people who have said they want it. Topic 7.2 shows the CSS, and Topic 7.5 the switch.
Try it yourself
- 1
Find the cost colour of each kind
In "Which of these moves things?", press zoom, then blur, and read each track on the timeline. Zoom is a
transformtrack, green (composite). Blur is afiltertrack, amber (paint) in the checker's Chromium. So the quiet one costs more. Cost and safety are two separate questions. - 2
Feel the scroll-against trap
In the parallax example choose against the scroll (1.5x) and scroll down a little: the text goes up and the orange bar goes down. With slow layer (0.5x) both go up, the bar slower. The printed 20 px is positive because the layer moves down.
Code & diagrams
Press each button once (1.2 s, forward and back). The script sorts each animation by its keyframe properties. On the timeline slide, zoom, spin, fade and colour are green (composite) and only blur is amber (paint): the cost colour does not tell you which kinds are safe.
Nothing is moving yet. Hover, click or scroll the page: every animation it starts shows up here as a track.
Console
Nothing logged yet.Expected console output
slide: transform -> moves things
zoom: transform -> moves things
spin: transform -> moves things
fade: opacity -> stays put
colour: background-color -> stays put
blur: filter -> stays putScroll the small box with each setting. The text scrolls up with your finger. The orange layer moves at half that speed, or, in the last setting, down. The script scrolls 40 px and prints how far the layer really moved.
Nothing is moving yet. Hover, click or scroll the page: every animation it starts shows up here as a track.
Console
Nothing logged yet.Expected console output
no parallax: -40 px on screen
slow layer (0.5x): -20 px on screen
against the scroll (1.5x): 20 px on screenBoth open the same confirmation. Press Open on each a few times. Which one would you be comfortable seeing 20 times a day if you were prone to dizziness?
A flies in from the side and grows (420 ms)
B fades in and rises 6 px (180 ms)
Break it on purpose
Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.
Break #1
Make the parallax factor larger
In "Parallax: slow, and against the scroll", change 1.5 in const modes to 4 and scroll with the last setting.
Myth vs fact
Myth
If the animation runs at 60 fps and is cheap, it is fine.
Fact
Frame rate and cost measure the browser's work. Vestibular symptoms come from what the eye sees: how much of the view moves and how fast. A smooth 60 fps full-screen zoom can still make someone ill.
Remember this
- 1
The problem this solves: most testing is done by people who can watch any animation all day. A page that feels lively to them can make another visitor dizzy within seconds, for hours. You need to know which motion carries that risk, so you avoid it by default.
- 2
The vestibular system is the part of the inner ear and brain that tracks balance. A vestibular disorder is a problem in it. Symptoms are dizziness, nausea and headaches, and for some people they last long after the animation ends. The A List Apart article "Designing Safer Web Animation for Motion Sensitivity" is the source of the lists below.
- 3
What triggers it. The article lists: large movements relative to the screen (a full-screen wipe), exaggerated parallax (background and foreground moving at different speeds), scroll-jacking (motion that is not tied to the user's own scroll speed), motion in the direction opposite to the scroll, animations that cover a large distance quickly (3D zooms), and unexpected horizontal scrolling or carousels that cannot be paused. The common thread is a large part of the view moving, quickly, in a way the person did not control.
- 4
What is usually safe. The article says animation of non-moving properties such as opacity, colour and blur is unlikely to be a problem, and small elements with motion probably will not cause trouble. This is why the calm version of almost every animation in this course is a fade.
- 5
Others are affected too: people with epilepsy (Topic 7.4) and migraine, and motion that never stops beside text hurts attention.
- 6
Cost and safety are different measures. The timeline colours a track by the browser's work. A big zoom on the compositor is green and can still make someone ill: both entrances in the feel pair below are green. Rule of thumb: an animation that moves more than a small part of the viewport, or crosses it in under about half a second, needs a calm alternative.
Explain it without notes
Why can a smooth, cheap animation still make someone ill?
Name four kinds of motion that commonly trigger vestibular symptoms and two kinds that usually do not.
Practice
Pick one animation on a site you know and say whether it needs a calm version, and why.
List five animations on a site you know. For each, say what moves, how big it is, and how fast, then mark it "quiet" or "needs a calm version".
Done when you can
You can say who is affected and name the symptoms
You can list the common triggers and the usually-safe kinds of motion
You can explain why cost colours on the timeline do not show safety
You review each new animation by size, speed and direction