Safer Web Animations
summary
Argues that small, purposeful animations can reduce cognitive load by using motion to show where things come from rather than relying on labels, with concrete examples: tab contrast transitions, a modal scales from click point, and tiny in-place loading indicators. Warns of harms for vestibular, migraine and seizure triggers and points to compliance via the CSS/JS media query prefers-reduced-motion plus an explicit localStorage toggle for users, notes WCAG 2.3.3 (AAA) and recommends opting out rather than heavy decorative effects.
AI-written summary · about
chapters (9)
- 0:00Start
- 0:01intopia
- 3:44Visual processing
- 8:06Good animation is...
- 8:53Distinctions
- 9:19Feedback
- 10:01State changes
- 12:34Using prefers-reduced-motion
- 17:18Let's chat
related talks
47mResponsible Web Animation: Move Things Without Weighing Them Down
46mThe Web in Motion
44mPractical Web Animation
30mHow to Animate Accessibility
43mDesigning Meaningful Animation
37mPractical Web Animation
41mDizzy Users Close Browsers: Balancing Creativity & Accessibility
37mAnimating the User Experience