home / skills / dylantarre / animation-principles / urgency-action

urgency-action skill

/skills/06-by-emotional-outcome/urgency-action

This skill helps you design urgency-driven animations that prompt immediate action by emphasizing time-sensitivity and clear CTAs.

npx playbooks add skill dylantarre/animation-principles --skill urgency-action

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

3.1 KB

---
name: urgency-action
description: Use when creating animations that prompt immediate user action, highlight time-sensitivity, or drive conversions.
---

# 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

```css
--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

```css
@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.

Overview

This skill provides clear, principled guidance for designing urgency-and-action animations that prompt immediate user responses and emphasize time-sensitivity. It translates classic animation techniques into practical rules, timings, and easing presets you can apply to CTAs, timers, badges, and error states. Use it to create motion that drives conversions without confusing or irritating users.

How this skill works

The skill inspects animation intent and recommends concrete treatments: deformation (squash & stretch), timing, path choice, and visual emphasis to maximize immediacy. It supplies suggested durations, easing curves, CSS keyframe patterns, and contrast/color guidance so you can implement fast, punchy motion consistently. It also flags ethical considerations to avoid misleading or abusive urgency.

When to use it

Limited-time sales, flash promotions, or expiring offers
Low-stock or scarcity indicators that are genuinely limited
Countdown timers and ticking events that need attention
Form validation errors and inline error feedback
Notification badges and CTA buttons to boost conversions
Checkout flows where immediate action reduces drop-off

Best practices

Keep animations short and decisive (100–300ms) to preserve momentum
Favor fast starts and abrupt stops: use ease-out or aggressive cubic-beziers
Isolate urgent elements visually: high contrast, bold shapes, and focus
Use moderate-to-high exaggeration (20–40%) for attention without chaos
Limit follow-through and lingering motion to avoid distracting the task
Be honest about scarcity and only apply urgency where it’s truthful

Example use cases

A CTA bounce when a user hesitates during checkout to reduce abandonment
A 3-second urgent pulse on a low-stock badge to drive immediate purchase
A fast countdown tick animation for limited-time deals with linear timing
A sharp error shake on invalid form submission to remove hesitation
A subtle, repeating attention pulse on new or unread notification badges

FAQ

How fast should urgency animations feel?

Aim for 100–300ms for primary actions; pulse intervals of 1–2s keep attention without annoyance.

Which easing curves work best for urgent motion?

Use aggressive ease-out shapes like cubic-bezier(0.0,0,0.2,1) for fast starts, and easing presets for punch and bounce when needed.

Can urgency animations be accessible?

Yes—respect reduced-motion preferences, provide clear visual contrast, and avoid perpetual motion that distracts assistive tech users.