deliberate-1200-2000ms
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.
More from dylantarre/animation-principles
mobile-touch
Use when designing iOS/Android gestures, haptic feedback, touch interactions, or native mobile animations.
1.6Kvideo-motion-graphics
Use when creating After Effects compositions, Premiere Pro motion, video titles, explainer videos, or broadcast motion graphics.
617motion-designer
Use when designing visual motion systems, creating animation specifications, or when a designer needs guidance on crafting beautiful, meaningful movement.
552micro-interactions
Use when designing small UI feedback moments like button states, toggles, form validation, loading indicators, or notification badges.
439saas-productivity
Use when designing animations for business tools, project management, collaboration software, or productivity apps
292game-designer
Use when designing game feel, player feedback systems, or when creating animations that enhance gameplay and player satisfaction.
287