Animation Principles
This gives Claude structured knowledge about motion design for UI work. Use it when you're implementing animations and want to avoid the common mistakes: durations that are too slow, easing curves that feel robotic, or motion that exists just because you can. It covers the practical stuff like which easing function to use when (ease-out for entrances, ease-in for exits), actual millisecond ranges for different interaction types, and how to stagger lists without making users wait. The prefers-reduced-motion reminder and performance notes are worth having in context. Honestly most useful for keeping animation work grounded in purpose rather than flourish.
- skills.sh installs
- 2.5K
- GitHub stars
- 3.3K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add owl-listener/designer-skills --skill animation-principles --agent claude-codeInstalls into .claude/skills of the current project.
Files
Animation Principles
You are an expert in applying motion design principles to create purposeful UI animations.
What You Do
You apply animation principles to make interfaces feel natural, guide attention, and communicate state changes.
Core UI Animation Principles
Easing
- Ease-out: decelerating (entering elements)
- Ease-in: accelerating (exiting elements)
- Ease-in-out: both (moving between positions)
- Linear: only for continuous animations (progress bars)
Duration
- Micro (50-100ms): button states, toggles
- Short (150-250ms): tooltips, fades, small movements
- Medium (250-400ms): page transitions, modals
- Long (400-700ms): complex choreography
Motion Principles
- Purposeful: every animation communicates something
- Quick: faster is almost always better in UI
- Natural: follow physics (acceleration, deceleration)
- Choreographed: related elements move in coordinated sequence
- Interruptible: animations can be cancelled mid-flight
Animation Types
- Entrance: fade in, slide in, scale up
- Exit: fade out, slide out, scale down
- Emphasis: pulse, shake, bounce
- Transition: morph, crossfade, shared element
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/owl-listener/designer-skills
- Category
- Design & UI/UX
- First seen
- Jun 3, 2026
More from owl-listener/designer-skills
All 68- Design Critique2.5K
- Design Qa Checklist2.5K
- Design Token Audit2.5K
- State Machine2.4K
- Error Handling Ux2.4K
- Design Token2.4K
- Usability Test Plan2.4K
- Accessibility Audit2.4K
- Case Study2.4K
- Ux Writing2.4K
- Journey Map2.4K
- Component Spec2.4K
- Design Principles2.4K
- Theming System2.4K
- Competitive Analysis2.3K
- Feedback Patterns2.3K
- Design Brief2.3K
- Prototype Strategy2.3K
- User Persona2.3K
- Jobs To Be Done2.3K
- Gesture Patterns2.3K
- Handoff Spec2.3K
- Experience Map2.3K
- Naming Convention2.3K
Recommended
More Design & UI/UX
accessibility-auditowl-listener/designer-skillsConduct a comprehensive accessibility audit against WCAG guidelines with severity ratings and remediation steps.2.4Kskills.sh installs
claude-designjiji262/claude-design-skillProduce thoughtful, high-fidelity design artifacts in HTML — landing pages, slide decks, interactive prototypes, animated videos, posters, wireframes, and visua2.3Kskills.sh installs
muapi-ui-designsamuraigpt/generative-media-skillsGenerate high-fidelity UI/UX mockups for mobile and web apps using Atomic Design principles — creates wireframes and design systems via muapi.ai2.2Kskills.sh installs
antfu-designantfu/skillsantfu-style design conventions, broadened. UnoCSS-first, class-based semantic tokens with dual light/dark for tooling and devtools UIs, plus design-read, anti-s2.1Kskills.sh installsmotion-systemowl-listener/designer-skillsDefine a motion system with duration tokens, easing vocabulary, and reduced-motion handling for consistent animation across a product.2.1Kskills.sh installs
layers-interaction-flowjamiemill/layers-skillsTechniques for mapping interaction structure and flow — places, affordances, edge cases, and failure paths — without committing to visual form2Kskills.sh installs