motion-sickness

Original：🇺🇸 English

Translated

Use when animation causes dizziness, nausea, disorientation, or vestibular discomfort

2installs

Sourcedylantarre/animation-principles

Added on2026-05-16

NPX Install

npx skill4agent add dylantarre/animation-principles motion-sickness

SKILL.md Content

View Translation Comparison →

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

css

@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 */
}