Icon & Badge Animation Principles

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

.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