Hana makes stoneware in a small studio in Brno and runs weekend workshops. Her new website is beautiful. The homepage opens with her logo spinning while the page loads. Then a carousel slides a new photo in every three seconds. As you scroll, mugs drift upward at a different speed from the text behind them. Every button bounces when you hover over it.
One visitor wants the workshop dates. The slide with the dates leaves before she has finished reading it. She waits for it to come round again, then gives up and scrolls. Another visitor, who gets vestibular migraines, scrolls past three floating mugs and closes the tab with her eyes shut. She will feel the after-effects for the rest of the afternoon.
Hana wanted the site to feel alive. Nothing on it told anyone anything they needed.
Hana and her visitors are imagined. The research, standards and laws below are real.
Motion is one of the most powerful tools in interface design, which is exactly why it needs a reason. This chapter covers what animation is genuinely good for, how long it should take, how it should feel, and the rules, some of them legal, about motion that harms.
What motion is for
Most useful interface animation does one of four jobs. It gives feedback (your tap registered). It shows continuity (this panel came from that button, and will go back there). It directs attention (something changed over here). Or it explains a relationship (these fields appeared because you ticked that box). Animation that does none of these is decoration, and decoration has a cost.
The continuity job rests on a surprising fact about vision. We see far less than we think. In 1997, Ronald Rensink, Kevin O'Regan and James Clark showed people a photo that alternated with a slightly changed version, separated by a blank screen of about 80 milliseconds. Something large changed each time: an object appeared or vanished, changed color or moved. People still took a long time to spot it, sometimes as long as 20 seconds, even though they knew a change was coming.
The researchers concluded that you only notice a change if your attention is on that spot while it happens. The brief blank removed the motion signal that would normally pull your eyes to it. This is called change blindness.
Rensink's experiment used photographs, not websites, and nobody tested animation in it. But the principle travels well. NN/g's Raluca Budiu describes change blindness in interfaces as most likely when movement as a cue is weak or missing: a basket count that silently goes from 2 to 3, an error message that appears far from the button you pressed. Her advice is to signal changes with animation, keep changes near where the user is looking, and avoid several competing animations at once.
Researchers made the same case for interfaces decades ago. In a 1993 paper, Bay-Wei Chang and David Ungar argued that interfaces built from static snapshots often startle and confuse people, and borrowed techniques from cartoon animation so that objects in their system arrived and left smoothly instead of popping in and out of existence.
What to do: list every animation on your site and write its job next to it: feedback, continuity, attention or relationship. Anything with no job is a candidate for deletion.
Timing: 100 to 500 ms
The single most common animation mistake is not ugliness. It is slowness. NN/g's Page Laubheimer, in a 2020 article on animation duration, puts most UI animations between 100 and 500 milliseconds, and most of those between 100 and 400. He notes that animations are far more often too long than too short.
His rough guide: simple feedback such as a checkbox or toggle around 100 ms; a substantial change such as a modal opening, 200 to 300 ms; 400 ms is already very slow and should be saved for large movements across large screens. Elements entering can take slightly longer than elements leaving: a pop-up might take 300 ms to appear and 200 to 250 ms to disappear. And the more often someone sees an animation, the shorter and subtler it should be. The first time a menu slides open, 300 ms feels smooth. The fortieth time, it feels like waiting.
Google's Material Design uses a token scale from 50 ms to 1,000 ms in its Android components, in steps of 50 ms up to 600 ms and 100 ms beyond. Having a scale matters more than the exact numbers. When every animation on a site uses one of four or five durations, the whole site feels consistent.
Timing also connects animation to speed. NN/g's Aurora Harley noted in a 2014 article that for an effect to feel caused by your action, it should begin within about 0.1 seconds. The animation can then take its 200 ms, but it must start immediately. An animation that waits before starting is a delay in disguise. The Doherty threshold, usually given as about 400 ms from a 1982 IBM paper by Walter Doherty and Ahrvind Thadani, is about the same idea at the scale of whole responses; the speed and feedback chapter covers what that research did and did not show.
What to do: pick a short scale, for example 100, 200, 300 and 400 ms, and use only those. Start every response to a tap immediately. If an animation feels slow, it is; cut it by a third and look again.
Easing: how motion feels
Nothing in the physical world starts or stops instantly. A thrown ball slows as it lands; a drawer accelerates as you pull it. Motion that moves at constant speed, called linear, looks mechanical. Easing curves change speed over the course of an animation.
NN/g's rule of thumb is simple. Use ease-out (fast start, gentle stop) for most animations, especially elements entering the screen: it responds instantly and lets the eye settle on where the thing lands. Use ease-in (slow start, fast finish) for elements leaving, so they seem to accelerate away. Avoid ease-in for anything triggered by a tap, because the slow start feels like lag.
Material's standard curve, cubic-bezier(0.2, 0, 0, 1), is a strong ease-out and a good default if you do not want to think about it. Spring-like curves that overshoot slightly and settle can add personality to a small element, such as a toggle snapping into place. On large elements, or used everywhere, they get tiring fast.
Pick a curve and press Play. Three dots run the same curve at 100, 300 and 800 ms. Notice how 100 ms feels like a snap, 300 ms like movement, and 800 ms like waiting.
100 mstransition: transform 300ms cubic-bezier(0, 0, 0.58, 1);
This demo needs JavaScript.
What to do: replace any linear or default easing on interface elements with an ease-out curve. Use ease-in only for exits. Keep overshoot for small, playful details.
What cartoons taught interfaces
Much of what designers know about motion comes from Disney's animators. In The Illusion of Life: Disney Animation (1981), Frank Thomas and Ollie Johnston set out twelve principles the studio had developed: squash and stretch, anticipation, staging, straight-ahead action and pose to pose, follow-through and overlapping action, slow in and slow out, arcs, secondary action, timing, exaggeration, solid drawing and appeal.
They were written for characters, not checkout buttons, but several translate directly:
- Slow in and slow out is easing. Things speed up and slow down instead of moving at constant speed.
- Timing is duration: the same movement reads as light or heavy, playful or serious, depending on how long it takes.
- Staging means one clear idea at a time. In an interface, that is one animation at a time, in the place the user is looking.
- Anticipation is a small movement that prepares for the main one. Chang and Ungar found that a slight counter-movement before an object moved, plus pacing the middle of a transition faster than its ends, made motion smoother and clearer.
- Follow-through means things settle rather than stopping dead: the slight overshoot of a spring curve.
- Arcs: natural movement curves. A panel that shrinks back into the button it came from, along a gentle path, reads as one object travelling.
The others need care. Squash and stretch and exaggeration bring characters to life, but on a pricing table they look like a toy. Interfaces are tools people use many times, and what delights once can grate on the twentieth visit.
What to do: borrow the quiet principles (slow in and out, timing, staging) everywhere. Save the loud ones (squash, exaggeration, bounce) for one moment of brand personality, if any.
Motion steals attention
Movement is the strongest attention signal there is. NN/g's Aurora Harley points out that motion in peripheral vision triggers a stimulus-driven shift of attention: your eyes go to it whether you want them to or not, and elements that slide in grab attention faster than ones that fade in. That is useful for a single important change. It is a problem when something moves all the time.
The classic offender is the auto-advancing carousel. It keeps pulling the eye away from whatever the visitor is reading, and it changes slides on its own schedule, not the reader's. Hana's workshop dates disappeared because a timer decided they had been on screen long enough. Banner blindness is the flip side: people learn to skip anything that looks like an ad, and a rotating banner can look exactly like one.
Accessibility rules draw a firm line here.
Moving, blinking or scrolling content that starts automatically, lasts more than five seconds and sits alongside other content must have a way to pause, stop or hide it, unless the movement is essential. Auto-updating content, such as a slideshow, must be pausable or its update frequency adjustable. Five seconds was chosen as long enough to catch attention but short enough to wait out. A pause that only lasts while the control has focus does not count; the control must not tie up focus.
Source: W3C, Understanding 2.2.2. Level A, so it is part of the WCAG 2.1 AA baseline referenced under the European Accessibility Act. General information, not legal advice.
What to do: remove auto-advancing carousels from the first screen. If you keep one, start it paused or add a clear pause control, and never put information people must read on a slide that leaves on its own.
When motion makes people ill
For some people, motion on a screen is not distracting. It is physically sickening. The vestibular system in the inner ear handles balance and spatial orientation. When it is impaired, a mismatch between what the eyes see moving and what the body feels can bring on dizziness, nausea and headaches.
How common is vestibular trouble? In a 2009 study using US national health survey data from 2001 to 2004, Yuri Agrawal and colleagues tested the balance of 5,086 adults aged 40 and over. On a standard standing balance test (a modified Romberg test), 35.4% showed signs of vestibular dysfunction, roughly 69 million Americans. Those reporting dizziness had twelve times the odds of falling.
Read that number carefully. It measures failing a balance test, not a diagnosed disorder, and certainly not sensitivity to web animation. Nobody has measured how many website visitors are made ill by parallax. What it does show is that the inner-ear system that motion sensitivity depends on is impaired far more often than most designers assume, and more often with age.
The W3C's explanation of WCAG 2.3.3 describes what is at stake: non-essential motion triggered by scrolling or other interactions can cause dizziness, nausea and headaches for people with vestibular disorders, sometimes severe enough to need bed rest. Parallax scrolling, where background and foreground move at different speeds, is the example it singles out. Large zooms, spinning, and big elements sliding across the screen are other common triggers.
Fortunately, the fix is built into every modern operating system and browser. People who are affected can switch on a "reduce motion" setting: on iPhone under Settings, Accessibility, Motion; on Android under Accessibility, Remove animations; on Windows 11 under Accessibility, Visual effects, Animation effects; on Mac under the Accessibility settings. Websites can read that setting with one CSS media query, prefers-reduced-motion.
/* Motion only for people who have not asked for less */
@media (prefers-reduced-motion: no-preference) {
.card { transition: transform 300ms cubic-bezier(0.2, 0, 0, 1); }
.hero-parallax { /* parallax effect here */ }
}
/* Or tone it down: swap movement for a short fade */
@media (prefers-reduced-motion: reduce) {
* { scroll-behavior: auto !important; }
.panel { transition: opacity 150ms linear; transform: none; }
}Thomas Steiner's web.dev article favors the first pattern: add motion only inside no-preference, so people who asked for less, and older browsers that do not understand the query, get a calm page by default. Reduced motion does not have to mean no feedback. A fade or a color change still tells people something happened, without movement through space.
What to do: wrap all non-essential motion, including parallax, scroll-triggered effects and smooth scrolling, in a prefers-reduced-motion query. Turn the setting on in your own phone and browse your site.
Flashing is a hard line
On 16 December 1997, Japanese television broadcast an episode of the Pokémon cartoon, "Dennō Senshi Porygon". One scene contained rapidly alternating red and blue flashes. According to Takahashi and Tsukahara (1998), about 700 people, mostly children, were taken to hospital with seizure-related symptoms; they identified a low-luminance 12 Hz alternating red and blue stimulus as the trigger.
The full story is more complicated than the legend. A 2001 analysis by Benjamin Radford and Robert Bartholomew noted that more than 12,000 children reported symptoms of some kind, but photosensitive epilepsy was diagnosed in only a small fraction. They argued that much of the wider outbreak was mass psychogenic illness, spread by dramatic news reports of the genuine seizures. Both things were true: a flashing sequence caused real seizures in hundreds of viewers, and fear amplified it.
For websites, the rule is simple and absolute.
Unless the flashing is below the general flash and red flash thresholds. In practice: a flash is a pair of opposing changes in brightness; more than three per second fails, unless the flashing area is small: under a quarter of any 10-degree field of view, where W3C estimates a 10-degree field as about 341 × 256 pixels on a 1024 × 768 screen. Saturated red flashing has its own, stricter threshold.
Source: W3C, Understanding 2.3.1. Level A. General information, not legal advice.
In the UK, deliberately flashing people with epilepsy is now a crime. Section 183 of the Online Safety Act 2023 created offences of sending or showing flashing images electronically, in force since 31 January 2024 according to the Crown Prosecution Service. Sending requires an intention that a person with epilepsy suffers harm, defined as a seizure, or alarm or distress; the maximum sentence is five years. Campaigners call it Zach's law, after Zach Eagling, a young campaigner with epilepsy whose fundraiser for the Epilepsy Society was targeted by trolls posting flashing images.
The offence targets deliberate attacks, not careless design, so it will not catch a badly made banner. It does show how seriously flashing is now taken. A web designer has no reason to come anywhere near the threshold.
What to do: do not use flashing or strobing effects, ever. Check videos and GIFs before embedding them. If you must show flashing content, keep it small, below three flashes per second, and add a warning.
What the rules require
Under the European Accessibility Act, e-commerce websites and apps in the EU have had to meet accessibility requirements since 28 June 2025, with an exemption for microenterprises providing services. Compliance is measured against EN 301 549, whose current version V3.2.1 references WCAG 2.1 Levels A and AA; V4.1.1, published in September 2026, moves to WCAG 2.2 and applies as the benchmark once cited in the EU's Official Journal. Either way, the motion criteria look like this:
| Criterion | Level | In plain words | Required under EN 301 549? |
|---|---|---|---|
| 2.2.2 Pause, Stop, Hide | A | Auto-moving content over five seconds must be pausable. | Yes |
| 2.3.1 Three Flashes or Below Threshold | A | No more than three flashes per second, unless below thresholds. | Yes |
| 2.3.3 Animation from Interactions | AAA | Motion triggered by interaction, such as scroll effects, can be turned off unless essential. | No, but it is cheap to meet with prefers-reduced-motion |
2.3.3 being AAA does not make it optional in any practical sense. It is the criterion that protects people with vestibular disorders, and honoring the operating system setting meets it in a few lines of CSS. The accessibility chapter covers who falls under the EAA and how to test.
Applies to e-commerce services offered to consumers in the EU. Microenterprises providing services (fewer than 10 staff and no more than €2 million turnover or balance sheet) are exempt. Penalties are set nationally and must be effective, proportionate and dissuasive.
Source: EUR-Lex, Directive (EU) 2019/882. General information, not legal advice. Check your own country's transposition.
What to do: audit every moving element against the three criteria in the table. Fix 2.2.2 and 2.3.1 failures first; they are Level A.
What to change tomorrow
Give every animation a job
Feedback, continuity, attention or relationship. Delete the rest, starting with spinning logos and bouncing buttons.
Use a short duration scale
100–400 ms for almost everything. Start immediately; exits slightly faster than entrances.
Switch to ease-out
Ease-out for arrivals, ease-in for exits, nothing linear on interface elements.
Stop the carousel
No auto-advance on the first screen. If one must rotate, give it a clear pause control and never hide key information on a slide.
Respect reduced motion
Wrap parallax, scroll effects and smooth scrolling in
prefers-reduced-motion: no-preference. Test with the setting switched on.Never flash
No strobes, no flashing GIFs, nothing above three flashes per second.
Hana kept one animation: when you add a workshop to your basket, a small card glides into the basket icon in 250 ms, and the count updates. Everything else stands still. The dates are on the page, readable for as long as anyone needs. Her site feels calmer, and, oddly, more expensive.
What the research supports
Strong: change blindness (attention must be on a change to see it) is one of the best-replicated findings in vision science, though its application to UI animation is reasoned rather than directly tested. Practitioner guidance, broadly consistent: 100–500 ms durations, ease-out for entrances (NN/g, Material). Clear standards: WCAG 2.2.2 and 2.3.1 are Level A and enforceable under the EAA via EN 301 549. Real but often misread: the 35.4% vestibular figure measures failing a balance test in US adults over 40, not sensitivity to websites. Historical: the 1997 Pokémon incident involved genuine seizures in hundreds of children and a much larger wave of psychogenic symptoms.
Sources
- Rensink, R. A., O'Regan, J. K. & Clark, J. J. (1997). To see or not to see: the need for attention to perceive changes in scenes. Psychological Science, 8(5), 368–373. Published abstract and the authors' 1996 conference abstract consulted for the flicker method and findings.
- Budiu, R. (2018). Change blindness in UX: definition. NN/g. Consulted for UI causes and recommendations.
- Chang, B.-W. & Ungar, D. (1993). Animation: from cartoons to the user interface. UIST '93, 45–55. Abstract consulted.
- Thomas, F. & Johnston, O. (1981). The Illusion of Life: Disney Animation. Book. Consulted for the list of twelve principles via published summaries.
- Laubheimer, P. (2020). Executing UX animations: duration and motion characteristics. NN/g. Consulted for duration ranges and easing guidance.
- Harley, A. (2014). Animation for attention and comprehension. NN/g. Consulted for peripheral motion and the 0.1 s cause-and-effect limit.
- Material Components for Android. Motion (theming documentation). Consulted for duration tokens and the standard easing curve.
- Agrawal, Y., Carey, J. P., Della Santina, C. C., Schubert, M. C. & Minor, L. B. (2009). Disorders of balance and vestibular function in US adults. Archives of Internal Medicine, 169(10), 938–944. Abstract consulted for sample, method and prevalence.
- Steiner, T. (2019). prefers-reduced-motion. web.dev. Consulted for the no-preference-first pattern.
- MDN Web Docs. prefers-reduced-motion. Consulted for values and operating-system settings.
- W3C (2024). WCAG 2.2 and Understanding documents for 2.2.2, 2.3.1 and 2.3.3. Consulted for requirements, thresholds and intent.
- Takahashi, T. & Tsukahara, Y. (1998). Pocket Monster incident and low luminance visual stimuli: special reference to deep red flicker stimulation. Acta Paediatrica Japonica / Pediatrics International, 40(6), 631–637. Abstract consulted.
- Radford, B. & Bartholomew, R. (2001). Pokémon contagion: photosensitive epilepsy or mass psychogenic illness? Southern Medical Journal, 94(2), 197–204. Abstract consulted.
- UK Parliament. Online Safety Act 2023, section 183; Crown Prosecution Service, Communications offences guidance. Consulted for the offence, penalty and commencement.
- European Union. Directive (EU) 2019/882 (European Accessibility Act); Davis Wright Tremaine (2026), EN 301 549 V4.1.1 update. Consulted for scope, dates and the standard's status.
Sources checked 18 October 2026. The background on Zach Eagling comes from press coverage of the campaign rather than the statute. Hana, her studio and the carousel are fictional; all figures are original illustrations.