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
- Respect
prefers-reduced-motion- Non-negotiable - Remove parallax effects - Common trigger
- Avoid zoom transitions - Use fades instead
- Keep motion small - Under 100px movement
- 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
| Triggering | Safe Alternative |
|---|---|
| Zoom transition | Fade + slight scale (max 5%) |
| Parallax scroll | Static or single-layer |
| Rotation | Fade or slide |
| Bounce/spring | Ease-out (no overshoot) |
| Full-page slide | Crossfade |
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 */
}