Web Motion Design

This translates Disney's 12 animation principles into practical web patterns, which is exactly the framing frontend motion needs. You get a reference table mapping squash and stretch to CSS scale transforms, anticipation to reverse movements, and timing guidelines (micro interactions at 100-200ms, standard at 200-400ms). The easing curve recommendations are specific enough to copy paste: cubic-bezier(0.4, 0, 0.2, 1) for standard, different values for enter and exit states. What makes this useful is it treats animation as a design system with principles, not just random effects. The performance rules are brief but correct: transform and opacity only, will-change sparingly, test on low-powered devices. Solid reference if you're building component libraries or design systems where motion needs to feel consistent and intentional.

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

View on GitHub

Install

$ npx -y skills add dylantarre/animation-principles --skill web-motion-design --agent claude-code

Installs into .claude/skills of the current project.

Files

Web Motion Design

Apply Disney's 12 animation principles to CSS, JavaScript, and frontend frameworks.

Quick Reference

Principle	Web Implementation
Squash & Stretch	`transform: scale()` on interaction states
Anticipation	Slight reverse movement before action
Staging	Focus user attention with motion hierarchy
Straight Ahead / Pose to Pose	JS frame-by-frame vs CSS keyframes
Follow Through / Overlapping	Staggered child animations, elastic easing
Slow In / Slow Out	`ease-in-out`, cubic-bezier curves
Arc	`motion-path` or bezier translate transforms
Secondary Action	Shadows, glows responding to primary motion
Timing	Duration: micro 100-200ms, standard 200-400ms
Exaggeration	Scale beyond 1.0, overshoot animations
Solid Drawing	Consistent transform-origin, 3D perspective
Appeal	Smooth 60fps, purposeful motion design

Principle Applications

Squash & Stretch: Apply scaleY compression on button press, scaleX stretch on hover. Keep volume constant—if you compress Y, expand X slightly.

SKILL.md on GitHub