Motion Sickness
If you've ever had users complain about dizziness from your animations or wondered why your slick parallax effect makes people nauseous, this breaks down exactly which animation patterns trigger vestibular problems. It maps Disney animation principles (exaggeration, arcs, follow-through) to their accessibility issues and gives you concrete fixes: no zoom transitions over 5%, kill the parallax, keep movement under 100px, and respect prefers-reduced-motion religiously. The troubleshooting checklist is solid, and the safe alternatives table is basically a cheat sheet for turning triggering effects into accessible ones. Honestly refreshing to see motion design treated as the accessibility issue it actually is.
- skills.sh installs
- 531
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill motion-sickness --agent claude-codeInstalls into .claude/skills of the current project.
Files
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.
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/dylantarre/animation-principles
- Category
- Design & UI/UX
- First seen
- Jun 3, 2026
More from dylantarre/animation-principles
All 144- Large 500 800ms530
- Medium 300 500ms530
- Universal Industry530
- Trust Reliability529
- Deliberate 1200 2000ms528
- Product Manager528
- Small 200 300ms528
- Universal Elements528
- Universal Practitioner527
- Universal Solutions527
- Universal Tool527
- Accessibility Issues525
- Universal Fallback525
- Instant 0 100ms524
- Ux Friction524
- Media Publishing521
- Slow 800 1200ms520
- Universal Mindset519
- Universal Timing519
- Animation Principles Absolute Beginner
- Animation Principles Advanced
- Animation Principles Deep Dive
- Animation Principles Expert
- Animation Principles Intermediate
Recommended
More Design & UI/UX
frontend-designanthropics/skillsGuidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making ch1.1Mskills.sh installs
hyperframes-animationheygen-com/hyperframesAll animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven 1Mskills.sh installsmotion-graphicsheygen-com/hyperframesA short, design-led motion graphic where motion is the message — kinetic typography, stat count-up, chart/data-viz hit, logo sting / brand lockup, lower-third /514.3Kskills.sh installs
ui-ux-pro-maxnextlevelbuilder/ui-ux-pro-max-skillUI/UX design intelligence for web and mobile. Searchable local database with 84 styles, 192 color palettes, 74 font pairings, 192 product types, 98 UX guideline443.3Kskills.sh installsfigmaheygen-com/hyperframesImport Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as stat407.5Kskills.sh installs
gpt-tasteleonxlnx/taste-skillElite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typograph399.5Kskills.sh installs