Safe Vestibular Animation ms

Safe Vestibular Animation Time

For some people, motion on screen brings on nausea, dizziness or migraines. Parallax, zoom, big translations and sudden scaling are the usual culprits. WCAG 2.1 SC 2.3.3 (AAA) says any non-essential motion has to be something the user can switch off. Modern browsers already report that preference through the CSS media query @media (prefers-reduced-motion: reduce), and your code should respond by killing or shortening transitions.

A safe rule of thumb: hold UI transitions under 300–500 ms, and keep any continuous motion under 5 seconds unless there is a pause or stop control. Of all the effects out there, parallax is the one that sets off vestibular disorders most often. Groups like AbleGamers and the W3C (its MathML animation guidance included) push for toggles that let people turn off autoplay, looping and decorative motion.

Applications

Reach for this when you are reviewing splash screens, hero parallax, scroll-jacking, carousels, modal entrances, particle backgrounds, game cutscenes or onboarding flows. It matters most for inclusive products in healthcare, education, and any market where accessibility is regulated (EU EAA, US ADA).

FAQ

What counts as vestibular-unsafe motion? Big translations sweeping across the viewport, zooming in and out, 3D rotation, and parallax with a strong depth difference. Gentle fades and short slides are usually fine.

Does “prefers-reduced-motion” eliminate the issue? Only for the people who turned it on. Plenty have no idea the setting is even there, so cap your durations and steer clear of the harshest effects by default anyway.

Is 5 seconds a strict limit? It is a practical cap from WCAG: if motion runs longer, you must provide a mechanism to pause, stop, or hide it.