Back to Dictionary
Status & Confirmation
●○○Ready to Use

Badge Count Animation

When a notification badge value increments, the number scales up and down bouncy, and occasionally the badge itself pulses.

Live Demo

What It Is

When a notification badge value increments, the number scales up and down bouncy, and occasionally the badge itself pulses.

✓When to Use

  • Shopping cart total increasing
  • New unread messages arriving in a nav bar

✕When NOT to Use

  • If the number changes extremely rapidly (use Number Ticker)

Configuration Tips

  • 01Use framer-motion AnimatePresence mode="wait" to slide the old number up and bring the new number in from the bottom

You've Seen It In

iOS App IconsDiscordSlack

Prompt Templates

Copy and paste these prompts into your AI coding assistant.

Make my notification badge pop and bounce slightly when the number increases.

Code Example (Tailwind CSS)

export function BadgeCountAnimationDemo() {}

Related Effects

Number Ticker / Counting Animation

Numbers actively counting up from zero to their final value. Makes data updates feel dynamic and draws attention to key metrics.

Pulsing Hotspot

A small circular dot that softly pulses outwards like a sonar ping. Gently draws user attention to unread items or new un-clicked features.