Universal Industry
This gives you Disney's 12 animation principles translated into sensible defaults for interface work. You get specific timing ranges (100ms for micro-interactions, 200-300ms for standard transitions), easing guidance for different contexts, and an adaptation framework that adjusts principles by brand personality and user state. The approach is practical: start with the defaults, then calibrate based on whether you're designing for professional, playful, or premium contexts. It's honestly most useful as a reference when you need to justify timing choices or explain why certain motion feels wrong. The universal timing table alone is worth keeping around.
- skills.sh installs
- 530
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill universal-industry --agent claude-codeInstalls into .claude/skills of the current project.
Files
Universal Animation Principles
Apply Disney's 12 principles as flexible foundations that adapt to any industry context with sensible defaults.
The 12 Principles Applied
1. Squash & Stretch
- Default: Subtle compression on interactive elements
- Adjust By: Brand personality (playful = more, serious = less)
- Universal Rule: Never distort data or important content
2. Anticipation
- Default: Brief pause before significant actions
- Adjust By: Action importance (bigger action = more anticipation)
- Universal Rule: Always signal before irreversible actions
3. Staging
- Default: Primary action takes visual focus
- Adjust By: Content hierarchy and user goals
- Universal Rule: One main focus per screen state
4. Straight Ahead & Pose to Pose
- Default: Pose to pose for UI, straight ahead for data
- Adjust By: Content type and interaction pattern
- Universal Rule: Match approach to content predictability
Sponsors
Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthly
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 language
Agent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee 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- 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
- Animation Principles Master
- Animation Principles Novice
- Animation Principles Quick Start
Recommended
More Design & UI/UX1
trust-reliabilitydylantarre/animation-principlesUse when creating animations that build user confidence, establish credibility, and communicate dependability.529skills.sh installs
trust-reliabilitydylantarre/animation-principlesUse when creating animations that build user confidence, establish credibility, and communicate dependability.529skills.sh installs2deliberate-1200-2000msdylantarre/animation-principlesUse when building slow intentional animations between 1200-2000ms - app intros, loading sequences, storytelling moments that create emotional resonance528skills.sh installs
deliberate-1200-2000msdylantarre/animation-principlesUse when building slow intentional animations between 1200-2000ms - app intros, loading sequences, storytelling moments that create emotional resonance528skills.sh installs3small-200-300msdylantarre/animation-principlesUse when building small transitions between 200-300ms - modal appearances, card expansions, navigation transitions that users consciously perceive528skills.sh installs
small-200-300msdylantarre/animation-principlesUse when building small transitions between 200-300ms - modal appearances, card expansions, navigation transitions that users consciously perceive528skills.sh installs4universal-elementsdylantarre/animation-principlesUse when animating any UI element not covered by specific skills, or when applying general animation principles across multiple element types528skills.sh installs
universal-elementsdylantarre/animation-principlesUse when animating any UI element not covered by specific skills, or when applying general animation principles across multiple element types528skills.sh installs5universal-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 installs
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 installs6universal-solutionsdylantarre/animation-principlesUse when facing any animation problem as a comprehensive diagnostic framework527skills.sh installs
universal-solutionsdylantarre/animation-principlesUse when facing any animation problem as a comprehensive diagnostic framework527skills.sh installs