Large Animations (500-800ms)

At 500-800ms, animations become events. Users stop and watch. Reserve this duration for significant moments that deserve attention and communicate importance.

Disney Principles at Large Scale

Full Expression of All Principles

Squash & Stretch: Dramatic deformation - 20-30% stretch visible and characterful. Objects feel elastic and alive.

Anticipation: Extended wind-up - 150-200ms anticipation sells the action. Clear "about to happen" signal.

Staging: Sophisticated choreography - multiple elements with clear hierarchy and timing offsets.

Straight Ahead/Pose to Pose: Definitely pose to pose - complex motion needs keyframe control.

Follow Through: Extended settling - elements continue moving 100-200ms after main action completes.

Slow In/Slow Out: Dramatic easing - strong deceleration creates impact at endpoints.

Arcs: Essential - all movement should follow natural curved paths.

Secondary Action: Rich layering - primary, secondary, and tertiary actions possible.

Timing: 30-48 frames at 60fps. Full cinematic range.

Exaggeration: Go bold - this duration supports theatrical expression.

Solid Drawing: Full 3D transforms - depth, perspective, complex rotations.

Appeal: Memorable moments - users will recall these animations.

Easing Recommendations

/* Dramatic entrance */ transition: all 600ms cubic-bezier(0.16, 1, 0.3, 1);

/* Powerful deceleration */ transition: all 700ms cubic-bezier(0, 0.55, 0.45, 1);

/* Elastic landing */ transition: transform 650ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

/* Smooth, cinematic */ transition: all 800ms cubic-bezier(0.25, 0.1, 0.25, 1);

Best Use Cases

• Hero image/section reveals

• Major feature introductions

• Success/completion celebrations

• Onboarding sequences

• Dashboard data loads

• Portfolio piece reveals

• First-time user experiences

• Important state changes

Implementation Pattern

.hero-reveal { opacity: 0; transform: translateY(60px) scale(0.9); transition: opacity 500ms ease-out, transform 700ms cubic-bezier(0.16, 1, 0.3, 1); }

.hero-reveal.visible { opacity: 1; transform: translateY(0) scale(1); }

/* Staggered reveal with follow-through */ .hero-title { transition-delay: 0ms; } .hero-subtitle { transition-delay: 100ms; } .hero-cta { transition-delay: 200ms; }

Warning Signs

• If users seem impatient, duration is too long

• If used for common actions, flow suffers

• If multiple large animations compete, staging fails

Key Insight

Large animations are moments of theater. They punctuate the experience and create memory. Use sparingly - every large animation should earn its duration.