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
transformandopacityfor GPU acceleration - Use
will-changesparingly and remove after animation - Prefer CSS over JavaScript when animation is predictable
- Test on low-powered devices