Use when building CSS animations, JavaScript transitions, React/Vue motion, or any browser-based animation work.
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:["$don't have the plugin yet? install it then click "run inline in claude" again.