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

Element Duration Easing

Attention pulse 150-200ms ease-out

CTA bounce 200-300ms ease-out-back

Countdown tick 100ms linear

Error shake 300-400ms ease-in-out

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.