Universal Timing

This is for when you need to understand animation timing principles that work at any duration, not just specific millisecond values. It teaches you the Disney animation principles with universal ratios, like keeping anticipation at 20-30% of your main action whether that's 100ms or 2 seconds. The easing curves and stagger ratios are duration-agnostic, which is actually useful when you're building a design system or trying to make consistent timing decisions across different types of animations. The duration selection framework at the end (instant vs quick vs dramatic) helps you choose speeds based on user feeling rather than guessing numbers. Good reference if you animate anything beyond basic fades.

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

View on GitHub

Install

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

Installs into .claude/skills of the current project.

Files

Universal Timing Principles

Some animation truths transcend duration. These principles work at 50ms and 5000ms. Master these to make good timing decisions at any scale.

Disney Principles - Universal Application

Always True

Squash & Stretch: Scale proportionally - 5% at 100ms, 30% at 2000ms. Never eliminate, always proportional.

Anticipation: Ratio stays constant - anticipation is 20-30% of main action duration, regardless of total time.

Staging: One clear focus - whether instant or cinematic, only one thing should demand primary attention.

Straight Ahead/Pose to Pose: Complexity matches duration - short = straight ahead, long = pose to pose.

Follow Through: Present at all durations - even 100ms can have micro-overshoot. Scale matches duration.

Slow In/Slow Out: Always ease - linear motion looks mechanical at every duration.

Arcs: Natural paths scale - short animations = subtle curves, long animations = sweeping arcs.

Secondary Action: Supports, never competes - true at 50ms and 5000ms.

Timing: Duration determines perception - same motion reads differently at different speeds.

SKILL.md on GitHub

Details

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