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.