🇺🇸English

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.

Weekly Installs

54

Repository

dylantarre/anim…inciples

GitHub Stars

28

First Seen

Jan 24, 2026

Security Audits

Gen Agent Trust HubPassSocketPassSnykPass

Installed on

codex47

gemini-cli44

opencode44

cursor43

github-copilot41

claude-code38