🇺🇸English

Accessibility Issues

Make animations inclusive using Disney's principles thoughtfully.

Problem Indicators

• Motion sickness complaints
• Vestibular disorder triggers
• Screen reader confusion
• Cognitive overload
• Seizure risk (flashing)
• Keyboard focus lost during animation

Diagnosis by Principle

Squash and Stretch

Issue : Excessive distortion causes disorientation Fix : Reduce or eliminate squash/stretch for users with prefers-reduced-motion. Use opacity changes instead.

Secondary Action

Issue : Too many moving elements Fix : Limit to one animated element at a time. Secondary actions should be subtle or removed.

Exaggeration

Issue : Dramatic motion triggers vestibular responses Fix : Reduce scale, rotation, and position changes. Keep movements small and predictable.

Timing

Issue : Animations too fast or too slow Fix : Provide consistent, predictable timing. Avoid sudden speed changes.

Arcs

Issue : Curved motion paths cause tracking difficulty Fix : Use linear motion for essential UI. Save arcs for optional decorative elements.

Quick Fixes

1. Respectprefers-reduced-motion - Always check and honor
2. No autoplay animation - Let users trigger motion
3. Keep focus visible - Never animate focus indicator away
4. Announce changes - Use ARIA live regions for dynamic content
5. Provide pause controls - For any looping animation

Troubleshooting Checklist

• Does animation respect prefers-reduced-motion?
• Is there a way to pause/stop animations?
• Are state changes announced to screen readers?
• Does keyboard focus remain visible and logical?
• Is flash rate under 3 per second?
• Can users complete tasks without animation?
• Are animations triggered by user action (not autoplay)?
• Test with screen reader enabled

Code Pattern

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}



// Check preference in JS
const prefersReducedMotion = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
).matches;

Weekly Installs

50

Repository

dylantarre/anim…inciples

GitHub Stars

20

First Seen

Jan 24, 2026

Security Audits

Gen Agent Trust HubPassSocketPassSnykPass

Installed on

codex42

opencode40

gemini-cli39

cursor38

github-copilot35

claude-code34