Universal Elements
When you need to animate something that doesn't have its own dedicated skill, this gives you Disney's 12 animation principles adapted for UI work. It's basically a reference card for making any element move well, with specific timing ranges (50-100ms for icons, 300-400ms for modals), easing functions as CSS custom properties, and rules like "never use linear" and "stagger related elements 20-50ms apart." The timing table alone is worth having on hand. Think of it as the fallback when you're animating a custom component or applying motion principles across different element types where the other skills don't quite fit.
- skills.sh installs
- 528
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill universal-elements --agent claude-codeInstalls into .claude/skills of the current project.
Files
Universal Element Animation Principles
Apply Disney's 12 principles to any UI element for consistent, professional motion design.
Universal Application of Principles
1. Squash & Stretch
Any element that responds to interaction can squash (compress on impact/press) and stretch (extend on release). Keep it subtle: 2-5% maximum for UI.
2. Anticipation
Before any significant action, a brief preparatory motion signals what's coming. Scale down before scale up, pull back before push forward. 50-100ms duration.
3. Staging
Direct attention to the most important element. Use contrast in motion, size, color, z-index, and blur to create clear visual hierarchy.
4. Straight Ahead & Pose to Pose
Pose-to-pose for most UI: define start and end states clearly. Straight-ahead for organic, flowing animations like particles or organic shapes.
5. Follow Through & Overlapping Action
Nothing stops all at once. Child elements lag behind parents. Shadows settle after objects. Stagger related elements 20-50ms apart.
6. Ease In & Ease Out
The golden rule: never use linear for UI motion. Enter with ease-out, exit with ease-in, transition with ease-in-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- 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
- Animation Principles Master
- Animation Principles Novice
- Animation Principles Quick Start
- Animation Principles Refresher
- Animation Principles Teaching Others
- Animation Principles Troubleshooting
- Animation Principles Universal Reference
- Video Motion Graphics2.7K
Recommended
More Design & UI/UX
universal-practitionerdylantarre/animation-principlesUse when applying animation principles in any context, for any role, or when a general understanding of Disney's 12 principles is needed.527skills.sh installsuniversal-solutionsdylantarre/animation-principlesUse when facing any animation problem as a comprehensive diagnostic framework527skills.sh installsuniversal-tooldylantarre/animation-principlesUse when implementing Disney's 12 animation principles with any animation tool or framework527skills.sh installsinstant-0-100msdylantarre/animation-principlesUse when building instantaneous UI feedback under 100ms - button presses, toggles, state changes that feel immediate and responsive524skills.sh installs
ramsartivilla/agents-configRun accessibility and visual design review on components. Use when reviewing UI code for WCAG compliance and design issues.523skills.sh installsuniversal-mindsetdylantarre/animation-principlesUse when approaching any animation task—establishing foundational thinking patterns, teaching animation principles, or when none of the specialized thinking sty519skills.sh installs