Universal Tool
This is a reference guide for Disney's 12 animation principles that you can apply regardless of whether you're working in CSS, JavaScript, Swift, or any other framework. It gives you concrete timing values (micro-interactions at 100-200ms, page transitions at 400-600ms), easing recommendations (ease-out for entrances, ease-in for exits), and implementation patterns for each principle like squash and stretch or follow through. The checklist at the end is genuinely useful before you ship. It's framework-agnostic by design, so you're trading specific code examples for universal concepts. Best used as a quick reference when you know something feels off about your animation but can't pinpoint why.
- skills.sh installs
- 527
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill universal-tool --agent claude-codeInstalls into .claude/skills of the current project.
Files
Universal Animation Principles
Apply all 12 Disney animation principles regardless of your tool or framework.
1. Squash and Stretch
Concept: Objects deform when moving, maintaining volume.
Implementation:
- When compressing one axis, expand the other
scaleX * scaleY ≈ constant- Apply on impact, acceleration, or deceleration
Values: Compress to 80%, expand to 120%
2. Anticipation
Concept: Prepare the audience for an action.
Implementation:
- Move opposite to the main action first
- ~20% of total duration for wind-up
- Smaller anticipation for faster actions
Pattern: Wind-up → Action → Settle
3. Staging
Concept: Direct viewer attention to what matters.
Implementation:
- Blur or fade background elements
- Scale up the focal point
- Use contrast (color, size, motion)
- One clear action at a time
4. Straight Ahead / Pose to Pose
Straight Ahead: Animate frame-by-frame sequentially. Good for fluid, organic motion.
Pose to Pose: Define key poses, then fill in between. Good for precise, planned motion.
Recommendation: Use pose-to-pose for UI, straight ahead for particles/effects.
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- 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
- Mobile Touch2.4K
- Framer Motion1.8K
- Motion Designer1.7K
Recommended
More Design & UI/UX
instant-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 installsuniversal-timingdylantarre/animation-principlesUse when learning animation timing fundamentals - principles that apply regardless of duration, the foundational rules that scale across all time ranges519skills.sh installs
website-clonerhoruz-ai/claude-pluginsAgentic workflow for cloning websites with pixel-perfect fidelity using specialized sub-agents. Use when the user wants to clone/copy/replicate a website, creat509skills.sh installs
academic-slidesevoscientist/evoskillsUse this skill for creating or refining an academic slide deck and the talk built around it: structuring a conference talk, thesis defense, lab meeting, or pape501skills.sh installs