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 100 ms cubic-bezier ( 0.4 , 0 , 0.2 , 1 ) ; } / Anticipation before expansion / .dropdown-enter { animation : dropdown-open 300 ms 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