home / skills / dylantarre / animation-principles / motion-sickness

motion-sickness skill

safe

/skills/12-by-problem-type/motion-sickness

This skill helps you prevent motion sickness in animations by applying Disney's principles to minimize dizzying effects across UI interactions.

npx playbooks add skill dylantarre/animation-principles --skill motion-sickness

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

2.8 KB

---
name: motion-sickness
description: Use when animation causes dizziness, nausea, disorientation, or vestibular discomfort
---

# 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. **Respect `prefers-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

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

Overview

This skill helps designers and developers prevent motion‑induced dizziness, nausea, and disorientation by applying practical rules derived from Disney’s animation principles. It identifies vestibular triggers, recommends safe alternatives, and provides quick fixes and checks to make interfaces comfortable for sensitive users. Use it to make animation choices that prioritize user well‑being without sacrificing clarity or delight.

How this skill works

The skill inspects animation patterns and interaction behaviors that commonly provoke vestibular discomfort, such as large zooms, parallax, continuous loops, and abrupt directional changes. It maps problematic cases to specific fixes tied to animation principles (Exaggeration, Arcs, Follow Through, Secondary Action, Slow In/Slow Out) and offers concrete code patterns and accessibility checks like prefers-reduced-motion. It also provides a troubleshooting checklist and safe alternative motion patterns for rapid remediation.

When to use it

When users report dizziness, nausea, or disorientation during interaction
Before shipping animated transitions for large displays or VR/AR contexts
When introducing parallax, zoom, or continuous background motion
During accessibility audits or QA for animation-heavy screens
When adding navigation animations that change perspective or direction

Best practices

Always respect prefers-reduced-motion; make it non-negotiable
Limit scale transforms to 10–20% and movement to under 100px when possible
Avoid multi-layer parallax and full-screen rotations; prefer static or single-layer alternatives
Use consistent, predictable easing (ease-out, critically damped) and avoid overshoot
Provide controls to pause/disable motion and test on large screens for amplification

Example use cases

Replace a full-screen zoom navigation with a crossfade and a subtle 5% scale
Remove multi-layer parallax on the homepage and keep a single, slow-moving accent layer
Convert looping background motion to a still image or a very slow, optional animation
Adjust onboarding flows to remove bounce/overshoot and use ease-out transitions
Run the troubleshooting checklist during QA to catch motion triggers before release

FAQ

Is prefers-reduced-motion enough by itself?

No. It is essential, but you should also limit motion scale, avoid parallax/zoom, and offer controls because some users may not enable the system preference or may still experience sensitivity.

How much movement is safe?

Keep transforms under 10–20% scale and positional movement under ~100px as a general guideline; use smaller values on large displays.