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.
Arcs: Sweeping curves - motion paths are clearly curved, visible trajectories.
Secondary Action: Complex layering - multiple levels of supporting action enhance primary motion.
Timing: 48-72 frames at 60fps. Near-film quality frame counts.
Exaggeration: Theatrical - push proportions and motion for emotional impact.
Solid Drawing: Full dimensional transforms - parallax, depth, 3D rotation.
Appeal: Emotional connection - slow motion creates intimacy with the interface.
Easing Recommendations / Dramatic, weighted motion / transition: all 1000ms cubic-bezier(0.16, 1, 0.3, 1);
/ Graceful entrance / transition: all 900ms cubic-bezier(0.22, 1, 0.36, 1);
/ Heavy, impactful landing / transition: transform 1100ms cubic-bezier(0.33, 1, 0.68, 1);
/ Elastic, memorable / transition: all 1000ms cubic-bezier(0.68, -0.6, 0.32, 1.6);
Best Use Cases App launch sequences Major feature reveals Storytelling moments Error recovery animations Achievement unlocks Tutorial sequences First-run experiences Section transitions in presentations Loading state to content reveals Implementation Pattern @keyframes slowReveal { 0% { opacity: 0; transform: translateY(100px) scale(0.8); } 60% { opacity: 1; } 100% { transform: translateY(0) scale(1); } }
.slow-reveal { animation: slowReveal 1000ms cubic-bezier(0.16, 1, 0.3, 1) forwards; }
/ Staggered sequence / .sequence-item { animation: slowReveal 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards; } .sequence-item:nth-child(n) { animation-delay: calc(var(--index) * 150ms); }
When NOT to Use Navigation between views (too slow) Repeated interactions (users get impatient) High-frequency actions Data-heavy interfaces Productivity tools Key Insight
Slow animations demand attention as payment. Only use when the moment is worth the user's time. These animations create memories, not just feedback.