Deliberate Animations (1200-2000ms)
At 1200-2000ms, you're creating experiences, not interfaces. This duration is for moments of genuine storytelling where animation itself is the content.
Disney Principles at Deliberate Speed
Full Narrative Expression
Squash & Stretch: Character-defining - 30-40% deformation creates personality. Objects become characters.
Anticipation: Full dramatic preparation - 300-400ms wind-up creates tension and expectation.
Staging: Scene direction - think cinematography. Establish shot, then detail. Clear narrative flow.
Straight Ahead/Pose to Pose: Pose to pose mandatory - 6-10 key poses define the narrative arc.
Follow Through: Extended settling - 300-500ms of secondary motion after primary completes.
Slow In/Slow Out: Narrative pacing - ease curves tell emotional stories. Sharp starts mean urgency, soft ends mean resolution.
Arcs: Orchestrated paths - motion paths are designed, not default. Each element's trajectory contributes to composition.
Secondary Action: Full ecosystem - primary, secondary, tertiary, ambient all working together.
Timing: 72-120 frames at 60fps. Animation-quality frame counts.
Exaggeration: Emotional amplification - push for feeling, not just movement.
Solid Drawing: Dimensional storytelling - parallax, depth, perspective shifts create space.
Appeal: Deep emotional engagement - users feel something during these animations.
Easing Recommendations
/* Narrative arc - beginning, middle, end */
animation-timing-function: cubic-bezier(0.34, 0, 0.14, 1);
/* Graceful, considered motion */
transition: all 1500ms cubic-bezier(0.16, 1, 0.3, 1);
/* Building momentum */
transition: all 1800ms cubic-bezier(0.65, 0, 0.35, 1);
/* Elastic storytelling */
transition: transform 1600ms cubic-bezier(0.68, -0.6, 0.32, 1.6);Best Use Cases
- App splash/launch sequences
- Brand moments
- Tutorial narratives
- Achievement celebrations
- Milestone animations
- Emotional state changes (error to success)
- Story-driven onboarding
- Feature announcements
Implementation Pattern
@keyframes appLaunch {
0% {
opacity: 0;
transform: scale(0.6) translateY(50px);
filter: blur(10px);
}
30% {
opacity: 1;
filter: blur(5px);
}
60% {
transform: scale(1.02) translateY(-10px);
filter: blur(0);
}
80% {
transform: scale(0.99) translateY(5px);
}
100% {
transform: scale(1) translateY(0);
}
}
.app-launch {
animation: appLaunch 1800ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}Critical Considerations
- Users MUST be able to skip/dismiss
- Never block critical paths
- Avoid on repeat visits (detect returning users)
- Must add genuine value, not decoration
- Test for motion sensitivity (prefer reduced motion)
Key Insight
Deliberate animations are brand investments. They don't just show what's happening - they make users feel something. Budget for design, iteration, and testing. These moments define perceived quality.