12-principles-of-animation
Audit animation code against Disney's 12 principles adapted for web. Use when reviewing motion, implementing animations, or checking animation quality. Outputs file:line findings.
By raphaelsalaja · 1,619 installs
npx skills add raphaelsalaja/skill --skill 12-principles-of-animation
Source repository · Upstream listing
12 Principles of Animation
Review animation code for compliance with Disney's 12 principles adapted for web interfaces.
How It Works
1. Read the specified files (or prompt user for files/pattern)
2. Check against all rules below
3. Output findings in file:line format
Rule Categories
Priority Category Prefix
1 Timing timing
2 Easing easing
3 Physics physics
4 Staging staging
Rules
Timing Rules
timing under 300ms
User initiated animations must complete within 300ms.
Fail:
Pass:
timing consistent
Similar elements must use identical timing values.
Fail:
Pass:
timing no entrance context menu
Context menus should not animate on entrance (exit only).
Fail:
Pass:
Easing Rules
easing entrance ease out
Entrances must use ease out (arrive fast, settle gently).
Fail:
Pass:
easing exit ease in
Exits must use ease in (build momentum before departure).
Fail:
Pass:
easing no linear motion
Linear easing should only be used for progress indicators, not motion.
Fail:
Pass:
easing natural decay
Use exponential ramps, not linear, for natural decay.
Fail:
Pass:
Physics Rules
physics active state
Interactive elements must have active/pressed state with scale transform.
Fail:
Pass:
physics subtle deformation
Squash/stretch deformation must be subtle (0.95 1.05 range).
Fail:
Pass:
physics spring for overshoot
Use springs (not easing) when overshoot and settle is needed.
Fail:
Pass:
physics no excessive stagger
Stagger delays must not exceed 50ms per item.
Fail:
Pass:
Staging Rules
staging one focal point
Only one element should animate prominently at a time.
Fail:
staging dim background
Modal/dialog backgrounds should dim to direct focus.
Fail:
Pass:
staging z index hierarchy
Animated elements must respect z index layering.
Fail:
Pass:
Output Format
When reviewing files, output findings as:
Summary Table
After findings, output a summary:
Rule Count Severity
timing under 300ms 2 HIGH
physics active state 3 MEDIUM
easing entrance ease out 1 MEDIUM
References
[The Illusion of Life: Disney Animation](https://www.amazon.com/Illusion Life Disney Animation/dp/0786860707)
[Apple WWDC23: Animate with Springs](https://developer.apple.com/videos/play/wwdc2023/10158)