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.

large-500-800ms