🇺🇸English

Motion Sickness Prevention

Eliminate vestibular triggers using Disney's principles safely.

Problem Indicators

• Users report dizziness or nausea
• Disorientation during navigation
• Users avoid certain features
• Complaints increase with larger screens
• Parallax or zoom effects cause issues

Dangerous Patterns

These trigger vestibular responses:

• Large-scale zoom animations
• Parallax scrolling (especially multi-layer)
• Full-screen rotations
• Rapid direction changes
• Continuous/looping background motion
• Scroll-jacking

Diagnosis by Principle

Exaggeration

Issue : Over-dramatic motion Fix : Reduce scale of transforms. Max 10-20% size change. Avoid full-screen zooms.

Arcs

Issue : Curved paths cause tracking strain Fix : Use linear motion for functional UI. Save arcs for small, optional elements only.

Follow Through

Issue : Overshooting creates whiplash effect Fix : Remove bounce/overshoot from navigation. Use critically damped springs or ease-out.

Secondary Action

Issue : Multiple moving elements cause confusion Fix : Limit to one primary motion. Remove parallax layers.

Slow In and Slow Out

Issue : Acceleration patterns cause disorientation Fix : Use consistent, predictable easing. Avoid sudden speed changes.

Quick Fixes

1. Respectprefers-reduced-motion - Non-negotiable
2. Remove parallax effects - Common trigger
3. Avoid zoom transitions - Use fades instead
4. Keep motion small - Under 100px movement
5. No scroll-jacking - Let scroll be scroll

Troubleshooting Checklist

• Does animation respect prefers-reduced-motion?
• Is any element moving more than 100px?
• Are there any zoom effects?
• Is parallax present? Remove it.
• Are there continuous/looping animations?
• Can users pause or disable motion?
• Test on large display (motion amplified)
• Test for 5+ minutes continuously

Safe Alternatives

Code Pattern

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

  .parallax {
    transform: none !important;
  }
}

/* Safe default motion */
.safe-transition {
  transition: opacity 200ms ease-out;
  /* Avoid: transform with large values */
}

Weekly Installs

56

Repository

dylantarre/anim…inciples

GitHub Stars

30

First Seen

Jan 24, 2026

Security Audits

Gen Agent Trust HubPassSocketPassSnykPass

Installed on

codex50

gemini-cli47

opencode47

cursor46

github-copilot44

claude-code42