Attention-Grabbing Animations
Apply Disney's 12 principles to focus-drawing motion.
Principle Application
Squash & Stretch: Pulsing scale draws attention. 1.0 → 1.1 → 1.0 cycle catches peripheral vision.
Anticipation: Brief pause before attention animation. Let it build then release.
Staging: Position attention elements where users will see them. Corner badges, inline highlights.
Straight Ahead vs Pose-to-Pose: Design attention states: rest, active/pulsing, acknowledged.
Follow Through & Overlapping: Badge pulses, then count updates. Stagger the attention signals.
Slow In/Slow Out: Ease in/out on pulses. Smooth oscillation is less jarring than sharp bounces.
Arcs: Shake animations follow arc patterns. Left-right with slight vertical oscillation.
Secondary Action: Pulse + glow + color shift for maximum attention (use sparingly).
Timing:
- Single attention grab: 300-500ms
- Repeating pulse: 2000-3000ms cycle
- Urgent pulse: 1000-1500ms cycle
- Decay: Stop after 3-5 cycles or 10 seconds
Exaggeration: This is where exaggeration shines. Scale to 1.2, bright colors, bold motion.
Solid Drawing: Attention elements must still feel part of the UI, not floating or detached.
Appeal: Attention should feel like helpful notification, not aggressive demand.
Timing Recommendations
| Attention Type | Duration | Cycles | Decay |
|---|---|---|---|
| Badge Pulse | 300ms | 2-3 | Stop after animation |
| Notification Dot | 2000ms | 3 | 6 seconds total |
| New Feature | 500ms | 2 | Stay subtle |
| Error Shake | 400ms | 1 | None |
| Urgent Alert | 1000ms | infinite | Until dismissed |
| Promotional | 3000ms | 2 | 6 seconds |
Implementation Patterns
/* Pulse attention */
.badge-pulse {
animation: pulse 2000ms ease-in-out 3;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.15); }
}
/* Subtle glow */
.glow-attention {
animation: glow 2000ms ease-in-out 3;
}
@keyframes glow {
0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
50% { box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.3); }
}
/* Error shake */
.shake {
animation: shake 400ms ease-in-out;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
20%, 60% { transform: translateX(-8px); }
40%, 80% { transform: translateX(8px); }
}
/* Ring animation (notification) */
.ring {
animation: ring 2500ms ease-in-out 2;
}
@keyframes ring {
0%, 100% { transform: rotate(0); }
10%, 30% { transform: rotate(10deg); }
20%, 40% { transform: rotate(-10deg); }
50%, 100% { transform: rotate(0); }
}Attention Budget
// Auto-stop attention after timeout
const attention = element.animate([
{ transform: 'scale(1)' },
{ transform: 'scale(1.15)' },
{ transform: 'scale(1)' }
], {
duration: 2000,
iterations: 3
});
// Or with CSS
setTimeout(() => {
element.classList.remove('attention');
}, 6000);Key Rules
- Maximum 1 attention animation visible at a time
- Auto-stop after 3-5 cycles (10 seconds max)
- Provide way to permanently dismiss
- Never use for non-essential content
prefers-reduced-motion: static indicator only, no animation- Urgent animations must have audio/haptic alternative for accessibility