Large Animations (500-800ms)

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.