Back to Dictionary
Data & Content Visualization
●○○Ready to Use
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.
Live Demo
Total Users
0What It Is
Numbers actively counting up from zero to their final value. Makes data updates feel dynamic and draws attention to key metrics.
✓When to Use
- KPI dashboards when numbers load or refresh
- Milestone celebrations (e.g., reaching 1M users)
- E-commerce stats like total sales or active users
- Checkout pages showing total price calculation
✕When NOT to Use
- Data tables with many numbers (can cause motion sickness)
- Values that change extremely frequently (use simple text replacement)
- Negative or error values where animation feels inappropriately celebratory
Configuration Tips
- 01Use tabular-nums CSS to prevent horizontal jitter during counting
- 02Use an ease-out timing function so counting slows down as it reaches the target
- 03Format output with commas or currency symbols (Intl.NumberFormat)
You've Seen It In
StripeVercelNotion HQ DashboardApple Fitness
Prompt Templates
Copy and paste these prompts into your AI coding assistant.
Add a number counting animation for my stats card. The number should count up from 0 to the target value smoothly over 2 seconds.
Code Example (Tailwind CSS)
'use client';
import { useEffect, useState } from 'react';
import { motion, useSpring, useTransform } from 'framer-motion';
export function AnimatedCounter({ value }: { value: number }) {
const springValue = useSpring(0, {
bounce: 0,
duration: 2000,
});
const displayValue = useTransform(springValue, (current) =>
Math.round(current).toLocaleString()
);
useEffect(() => {
springValue.set(value);
}, [springValue, value]);
return (
<motion.span className="tabular-nums text-4xl font-bold tracking-tight text-white">
{displayValue}
</motion.span>
);
}