web-motion-design

SKILL.md

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.

Anticipation: Before expanding a dropdown, shrink it 2-3% first. Before sliding content left, move it 5px right.

Staging: Dim background elements during modal focus. Use motion to direct eye flow—animate important elements first.

Straight Ahead vs Pose to Pose: Use CSS @keyframes for predictable, repeatable animations (pose to pose). Use JavaScript/GSAP for dynamic, physics-based motion (straight ahead).

Follow Through & Overlapping: Child elements should complete movement after parent stops. Use animation-delay with decreasing values for natural stagger.

Slow In / Slow Out: Never use linear for UI motion. Standard easing: cubic-bezier(0.4, 0, 0.2, 1). Enter: cubic-bezier(0, 0, 0.2, 1). Exit: cubic-bezier(0.4, 0, 1, 1).

Arc: Elements in nature move in arcs, not straight lines. Use offset-path or combine X/Y transforms with different easings.

Secondary Action: Button shadow grows/blurs on hover. Icon inside button rotates while button scales. Background particles respond to primary element.

Timing: Micro-interactions: 100-200ms. Standard transitions: 200-400ms. Complex sequences: 400-700ms. Page transitions: 300-500ms.

Exaggeration: Hover states scale to 1.05-1.1, not 1.01. Error shakes move 10-20px, not 2px. Make motion noticeable but not jarring.

Solid Drawing: Maintain consistent transform-origin. Use perspective for 3D depth. Avoid conflicting transforms that create visual glitches.

Appeal: Target 60fps—use transform and opacity only when possible. Add subtle personality through custom easing curves. Motion should feel intentional.

Code Patterns

/* Elastic button with squash/stretch */
.button:active {
  transform: scale(0.95, 1.05);
  transition: transform 100ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Anticipation before expansion */
.dropdown-enter {
  animation: dropdown-open 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes dropdown-open {
  0% { transform: scaleY(0.98); opacity: 0; }
  100% { transform: scaleY(1); opacity: 1; }
}

Performance Rules

Animate only transform and opacity for GPU acceleration

Use will-change sparingly and remove after animation

Prefer CSS over JavaScript when animation is predictable

Test on low-powered devices

1d:["$