Accessible Motion
This maps Disney's 12 animation principles to accessible alternatives for users with vestibular disorders and motion sensitivity. You get a quick reference table showing how to replace each principle (squash and stretch becomes opacity changes, anticipation becomes static state indicators), plus CSS and JavaScript patterns for respecting prefers-reduced-motion. The timing guidance is smart: either instant (0ms) or very slow (500ms+), avoiding the 150-400ms range that's fast enough to notice but slow enough to trigger symptoms. It includes a WCAG compliance checklist and lists what's generally safe (subtle opacity fades, color transitions) versus what to always avoid (parallax, auto-playing backgrounds). Useful if you're building interfaces that need motion but can't assume everyone tolerates it.
- skills.sh installs
- 689
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill accessible-motion --agent claude-codeInstalls into .claude/skills of the current project.
Files
Accessible Motion Design
Apply Disney's 12 animation principles while ensuring accessibility for users with vestibular disorders, motion sensitivity, and cognitive disabilities.
Quick Reference
| Principle | Accessible Implementation |
|---|---|
| Squash & Stretch | Opacity/color change instead |
| Anticipation | State change indication without motion |
| Staging | Focus management, not motion-based |
| Straight Ahead / Pose to Pose | Instant state changes |
| Follow Through / Overlapping | Eliminated or minimal fade |
| Slow In / Slow Out | Instant or very gentle ease |
| Arc | Straight or no movement |
| Secondary Action | Reduced or eliminated |
| Timing | Instant (0ms) or extended duration |
| Exaggeration | Removed entirely |
| Solid Drawing | Static visual clarity |
| Appeal | Clarity over personality |
Core Principle
Animation should enhance understanding, never hinder it. When motion causes harm, provide alternatives that maintain functionality.
Respecting User Preferences
CSS Media Query
/* Default: Full animation */
.element {
transition: transform 300ms ease-out;
}
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- Anime Js682
- Emotional Narrative674
- Rhythm Pacing663
- Healthcare Medical654
- Lottie Bodymovin652
- Hover Interactions650
- Character Appeal648
- Playfulness Fun648
- Creative Director631
- Data Visualization629
- Elegance Sophistication629
- Physics Intuition624
- Carousels Sliders620
- Timing Mastery620
- Transition Sequences619
- Education Learning618
- Rive Animations618
- Travel Hospitality611
- Loading States610
- Dramatic 2000ms Plus609
- Notifications Toasts606
- Frontend Developer605
- Navigation Menus601
- Buttons Ctas598
Recommended
More Design & UI/UX
accessibility-advocatedylantarre/animation-principlesUse when designing inclusive animations, addressing vestibular disorders and motion sensitivity, or ensuring animation accessibility compliance.576skills.sh installsux-researcherdylantarre/animation-principlesUse when evaluating animation usability, conducting motion studies, or when researching how animation affects user perception and task completion.571skills.sh installs
design-componentplugin87/ux-ui-agent-skillsDesign a UI component spec to the house quality bar — anatomy, variants, sizes, the 8 states, token mapping, and accessibility. Use when the user wants to desig565skills.sh installs
figma-ui-skillsihlamury/design-skillsFigma's UI design system. Use when building interfaces inspired by Figma's aesthetic - light mode, Inter font, 4px grid.363skills.sh installs
supanova-premium-aestheticuxjoseph/supanova-design-skillTeaches AI to design landing pages that feel like $150k agency work. Defines exact fonts, spacing, shadows, card structures, animations, and Korean typography s262skills.sh installs
html-ppt-taste-editorialnexu-io/open-design16:9 HTML deck in editorial-minimalist taste. Warm cream slides, serif display + grotesque body, hairline rules, monospace meta, generous macro-whitespace, one 160skills.sh installs