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.