Animation Principles Deep Dive
This is a technical reference for Disney's 12 animation principles adapted for code implementation. It covers squash and stretch, anticipation, timing, and the rest with actual parameters like deformation ratios (20-50% for cartoony, 5-15% for realistic) and motion curve formulas. If you're building animation libraries, working with motion design systems, or need to explain animation concepts to other developers with precise technical language, this gives you the vocabulary and math. It's essentially a cheat sheet that translates traditional animation knowledge into implementation details rather than just theory.
- GitHub stars
- 70
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill 'Animation Principles - Deep Dive' --agent claude-codeInstalls into .claude/skills of the current project.
Files
Complete Animation Principles Reference
Comprehensive technical guide to Disney's 12 principles with implementation details.
1. Squash and Stretch
Definition: Deformation of objects to show flexibility, weight, and motion.
Technical implementation:
- Volume must remain constant (area preserved)
- Stretch along motion path at velocity peaks
- Squash perpendicular to impact surface
- Ratio guidelines: 20-50% for cartoony, 5-15% for realistic
Applications: Facial expressions, body mechanics, object interactions, impact effects.
2. Anticipation
Definition: Preparatory action preceding main action.
Technical implementation:
- Direction opposite to main action
- Duration proportional to action magnitude
- Typical ratio: 1:3 anticipation to action frames
- Can be minimized for surprise effects
Applications: Jumps, throws, emotional shifts, scene transitions.
3. Staging
Definition: Presentation of idea for maximum clarity.
Technical implementation:
- Silhouette test: action readable as solid black shape
- Single focal point per composition
- Background contrast supports subject
- Camera angle serves story point
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- 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
- Micro Interactions1.5K
- Web Motion Design1.4K
- Scroll Animations1.2K
- Game Designer1.1K
- After Effects975
- Filmmaker943
- 3d Spatial824
- Gsap Greensock779
- Css Native760
- Saas Productivity757
- Game Development750
Recommended
More Design & UI/UX
animation-principles---novicedylantarre/animation-principlesUse when someone has basic awareness of animation principles and wants to start applying them in simple projects0skills.sh installsAnimation Principles - Universal Referencedylantarre/animation-principlesUse when discussing animation principles with users of unknown skill level, or when providing a balanced reference that works for any experience level0skills.sh installs
frontend-designlukerenton/explore-claude-codeCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applicat0skills.sh installs
frontend-designrecomby-ai/recomby-geoCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, 0skills.sh installs
design-principlessrbhr/Resume-MatcherSwiss International Style for Resume Matcher. Invoke ONLY when designing new UI components or modifying existing component styles.0skills.sh installs
frontend-designsyahiidkamil/software-engineer-ai-agent-atlasCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, 0skills.sh installs