home / skills / dylantarre / animation-principles / icons-badges

icons-badges skill

safe

/skills/07-by-ui-element/icons-badges

This skill applies Disney's animation principles to icons and badges to add personality and meaningful feedback in UI.

npx playbooks add skill dylantarre/animation-principles --skill icons-badges

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

Files (1)

SKILL.md

3.0 KB

---
name: icons-badges
description: Use when animating icons, badges, avatars, status indicators, or small visual elements to add personality and feedback
---

# Icon & Badge Animation Principles

Apply Disney's 12 principles to small UI elements for personality and meaningful feedback.

## Principles Applied to Icons

### 1. Squash & Stretch
Heart icons can squash/stretch on "like" tap. Notification badges can bounce with squash on arrival. Adds life to small elements.

### 2. Anticipation
Before icon action, brief scale down (0.9) for 50ms. Bell can tilt back before ringing forward. Prepares for action.

### 3. Staging
Active/important icons should be visually prominent: color, size, or animation. Badges use contrasting colors to stand out.

### 4. Straight Ahead & Pose to Pose
Simple icons use pose-to-pose (two states). Complex icon animations (morphing) can use straight-ahead for organic transitions.

### 5. Follow Through & Overlapping Action
Bell ring continues after user interaction stops. Badge number updates before badge bounce settles. Multi-part icons offset timing.

### 6. Ease In & Ease Out
Icon hover: `ease-out`. Icon click: `ease-in-out`. Bounce: `cubic-bezier(0.68, -0.55, 0.27, 1.55)` for overshoot.

### 7. Arcs
Bell swinging follows pendulum arc. Refresh icons spin in true circular arcs. Arrows can arc during state changes.

### 8. Secondary Action
While icon scales (primary), color changes (secondary), glow pulses (tertiary). Badge count changes while badge bounces.

### 9. Timing
- Hover scale: 100-150ms
- Click feedback: 50-100ms
- Badge bounce: 300-400ms
- Bell ring: 400-600ms
- Status pulse: 1500-2500ms
- Morph transition: 250-350ms

### 10. Exaggeration
Celebratory icons (confetti, hearts) can be very animated. Functional icons (menu, close) should be subtle. Match purpose.

### 11. Solid Drawing
Icons must remain crisp at all animation frames. Maintain stroke consistency. Badge numbers should be legible during motion.

### 12. Appeal
Animated icons add personality. A bouncing notification feels alive. A pulsing status feels responsive. Small touches matter greatly.

## CSS Implementation

```css
.icon-btn:hover .icon {
  transform: scale(1.15);
  transition: transform 150ms ease-out;
}

.icon-btn:active .icon {
  transform: scale(0.9);
  transition: transform 50ms ease-in;
}

.badge {
  animation: badgeBounce 400ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

@keyframes badgeBounce {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.status-indicator {
  animation: pulse 2000ms ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.1); }
}

.bell-icon:hover {
  animation: ring 500ms ease-in-out;
}

@keyframes ring {
  0%, 100% { transform: rotate(0); }
  20%, 60% { transform: rotate(15deg); }
  40%, 80% { transform: rotate(-15deg); }
}
```

## Key Properties
- `transform`: scale, rotate
- `opacity`: pulse effects
- `animation`: complex sequences
- `fill`/`stroke`: SVG color changes
- `filter`: glow effects

Overview

This skill adapts Disney’s 12 principles of animation to icons, badges, avatars, and other small UI elements to add personality and meaningful feedback. It focuses on subtle, high-impact motion that improves clarity and delight without overwhelming the interface. Use the patterns and timings to make small elements feel responsive, legible, and memorable.

How this skill works

The skill prescribes expressive micro-animations (scale, rotate, opacity, and color) and timing curves for common UI elements. It maps principles like squash & stretch, anticipation, ease in/ease out, and follow-through to concrete behaviors (hover, click, arrival, update). Includes practical CSS patterns, keyframes, and timing suggestions so engineers and designers can implement consistent, accessible motion.

When to use it

Animating like/heart taps, thumbs-up, or reaction interactions
Animating notification badges and incoming items to show arrival and priority
Animating status indicators and presence dots with readable pulses
Adding micro-feedback to buttons and small controls on hover, focus, or click
Animating avatar or profile elements for state changes (online, speaking)

Best practices

Match intensity to purpose: celebratory elements can exaggerate; functional icons should be subtle
Keep typography and numbers legible throughout motion; maintain stroke weight and contrast
Use short anticipation and fast feedback for clicks (50–100ms) and longer loops for ambient pulses (1.5–2.5s)
Prefer easing curves over linear motion; use cubic-bezier overshoot for bouncy arrivals
Limit simultaneous motion on screen to avoid distraction and performance cost

Example use cases

Badge arrival: scale from 0 → 1.2 → 1 with a bouncy cubic-bezier (300–400ms) to draw attention
Like tap: quick squash/stretch on click (50–100ms) with a brief anticipation scale down (90% for 50ms)
Bell notification: tilt back slightly before ringing and use follow-through so the bell settles after interaction (400–600ms)
Status indicator: slow pulse (1500–2500ms) using opacity + scale for presence without stealing focus
Morphing icons: use pose-to-pose for simple state swaps and straight-ahead for organic, multi-frame transitions

FAQ

How do I keep animated badges accessible?

Keep motion brief, avoid high-frequency flicker, ensure badge text remains readable during animation, and provide a reduced-motion alternative via prefers-reduced-motion.

What timings and easings should I use as defaults?

Use 100–150ms for hover scales, 50–100ms for click feedback, 300–400ms for bouncy arrivals, and cubic-bezier(0.68, -0.55, 0.27, 1.55) for overshoot when appropriate.