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.