Web Motion Design

Use when building CSS animations, JavaScript transitions, React/Vue motion, or any browser-based animation work.

By dylantarre

Animation
Use this skill

Any scene or interface; adapt examples to your renderer.

Add the skill folder in Settings. The in-app library is coming in the next desktop update.

The skill

The source instructions, with their original wording. Read as Markdown.

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

  1. Animate only transform and opacity for GPU acceleration
  2. Use will-change sparingly and remove after animation
  3. Prefer CSS over JavaScript when animation is predictable
  4. Test on low-powered devices