When you're working on animation but don't have a specialized skill for your exact context, this gives you Disney's 12 principles as a general reference guide. It's a solid breakdown of squash and stretch, anticipation, arcs, timing, and the rest, with practical application notes for each. The quick reference table is handy when you just need a reminder of what principle does what. Honestly, it reads more like documentation than an interactive skill, but if you're implementing animation systems or need to explain these concepts to Claude in a conversation, having this loaded means you won't need to explain the fundamentals yourself. Think of it as animation vocabulary for any domain.

skills.sh installs
525
GitHub stars
146
last updated
Aug 21, 2026

Install

$ npx -y skills add dylantarre/animation-principles --skill universal-fallback --agent claude-code

Installs into .claude/skills of the current project.

Files

Universal Animation Principles

Disney's 12 animation principles applied generically across any medium or context.

Quick Reference

PrincipleUniversal Application
Squash & StretchShow impact and flexibility
AnticipationPrepare before action
StagingDirect attention clearly
Straight Ahead / Pose to PoseContinuous vs keyframe approach
Follow Through / OverlappingElements complete at different rates
Slow In / Slow OutEase acceleration/deceleration
ArcNatural curved motion paths
Secondary ActionSupporting elements reinforce primary
TimingDuration affects perceived weight
ExaggerationPush for clarity and impact
Solid DrawingMaintain form and structure
AppealDesign for engagement and delight

The 12 Principles Explained

1. Squash & Stretch

Objects deform during action to show impact, weight, and flexibility. Volume remains constant—compression in one axis means expansion in another. The most important principle for showing life and physics.

Sponsors

Details

Repository
github.com/dylantarre/animation-principles
Category
Design & UI/UX
First seen
Jun 3, 2026

More from dylantarre/animation-principles

All 144
1dylantarre avatarmedia-publishingdylantarre/animation-principlesUse when designing animations for news sites, content platforms, publishing apps, or media consumption experiences521skills.sh installs
2motion-team avatarhook-tacticsmotion-team/creative-strategy-skillsReference library of 35+ hook and headline tactic types. Use this when a user asks for hooks organized by tactic, wants to know which tactic to use for a given 518skills.sh installs
3motion-team avatarreview-auditmotion-team/creative-strategy-skillsAnalyzes positive customer reviews to surface deep customer insights for ad copy. Use this whenever a user provides customer reviews and wants to understand the497skills.sh installs
4motion-team avatarbrand-intakemotion-team/creative-strategy-skillsRuns a structured brand intake interview and then conducts web research to build a comprehensive brand context document. Use this whenever the user says they're490skills.sh installs
5motion-team avatarhook-voice-patternsmotion-team/creative-strategy-skillsA living swipe file of scroll-stopping hook templates collected from the wild — real sentence structures and native voice patterns that have proven they stop th480skills.sh installs
6motion-creative avatarugc-scriptwritermotion-creative/skillsHelps outline and draft UGC-style scripts for paid social ads. Use when the user has an ad concept and wants to write a script for creator content. Triggers: "U465skills.sh installs