slow-800-1200ms
Slow Animations (800-1200ms)
At 800-1200ms, animation approaches cinematic territory. This is deliberate, intentional motion for moments that matter. Users are expected to stop and watch.
Disney Principles at Slow Speed
Cinematic Application
Squash & Stretch: Pronounced and characterful - 25-35% deformation tells stories. Objects have weight and personality.
Anticipation: Full theatrical wind-up - 200-300ms preparation. The audience knows something is coming.
Staging: Scene composition - think in terms of camera and stage. Clear visual hierarchy with entrance order.
Straight Ahead/Pose to Pose: Pose to pose essential - 4-6 key poses for 1 second of motion.
Follow Through: Extended overlap - different elements settle at clearly different times, 200-300ms of settling.
Slow In/Slow Out: Dramatic curves - strong ease-in creates weight, strong ease-out creates impact.
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.
618motion-designer
Use when designing visual motion systems, creating animation specifications, or when a designer needs guidance on crafting beautiful, meaningful movement.
553micro-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