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)