Urgency & Action Animation

Create animations that motivate immediate response and communicate time-sensitivity.

Emotional Goal

Urgency creates a compelling need to act now. Action-driving animations capture attention, create momentum, and remove hesitation through dynamic, forward-moving motion.

Disney Principles for Urgency

Squash & Stretch

Sharp, impactful deformations. Quick squash on landing (15-25%) creates impact. Fast stretch during motion shows speed and force.

Anticipation

Very short or none (0-50ms). Urgency means no time to prepare. Direct, immediate action. Skip wind-up for instant response.

Staging

Aggressive focus on call-to-action. High contrast, motion isolation. Everything else should recede. Spotlight the urgent element.

Straight Ahead Action

Creates unpredictable, attention-grabbing movement. Use for pulsing, shaking, or urgent indicator animations.

Follow Through & Overlapping Action

Minimal follow-through. Sharp stops communicate decisiveness. No lingering—immediate resolution drives action.

Slow In & Slow Out

Asymmetric: fast start, abrupt end. ease-out with high initial velocity. cubic-bezier(0.0, 0, 0.2, 1) for aggressive acceleration.

Arc

Direct, linear paths for speed. Urgency takes the shortest route. Curved paths feel leisurely—use straight lines.

Secondary Action

Attention-grabbing pulses, glows, or shakes. Badge counters that bounce. Subtle but persistent motion draws eyes.

Timing

Fast and punchy (100-200ms). Rapid animations create energy. Pulse intervals: 1-2 seconds to maintain attention without annoyance.

Exaggeration

Moderate to high (20-40%). Amplified motion captures attention. Oversized bounces on notifications, emphasized shakes on errors.

Solid Drawing

Strong, bold forms. High-contrast shapes that command attention. No subtlety—clarity is paramount.

Appeal

Bold colors (red, orange). Strong contrast. Asymmetric, dynamic compositions that feel active, not static.

Timing Recommendations

CSS Easing

--urgency-snap: cubic-bezier(0.0, 0, 0.2, 1);
--urgency-punch: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--urgency-bounce: cubic-bezier(0.34, 1.4, 0.64, 1);

Attention Patterns

@keyframes urgent-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes urgent-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

When to Use

• Limited-time offers and sales
• Low stock warnings
• Countdown timers
• Form validation errors
• Notification badges
• Call-to-action buttons
• Checkout urgency

Ethics Note

Use urgency honestly. Fake scarcity damages trust. Reserve for genuinely time-sensitive situations.