A founder I work with sent me her homepage last spring and asked why nobody seemed impressed by it. Her company had shipped two million orders, and she had written exactly that on the page: "2,000,000+ orders shipped," set in small gray text under the fold, next to a stock photo of a warehouse. It was true, it was impressive, and it was completely invisible. I asked five people to look at the page for ten seconds and tell me one thing they remembered. Not one of them mentioned the number.
We rebuilt that single line as an animated number counter that ticked from zero to 2,000,000 the moment it scrolled into view, and put it in a row of three stats near the top of the page. Same claim, same font family, same brand colors.
This time people remembered it. That is the whole idea behind the animated number counter examples I am going to walk you through here, and why I keep coming back to this one small widget when a page feels flat.
Why Animated Number Counters Work So Well
The honest reason is not psychology jargon. It is that our eyes chase movement. As Nielsen Norman Group puts it in their guidance on animation in UX, "the human visual system is very sensitive to motion," which means animation can either make a subtle signifier obvious or annoy people, depending entirely on how you use it.
A number that counts up sits on the useful side of that line, because the motion is carrying the information rather than decorating it. The animation is the number.
The data on interactive page elements backs this up. Linearity's roundup of web design statistics reports that interactive web design can boost conversion rates by up to 43%, that micro-interactions lift user engagement by around 21% on average, and that 60% of users are more likely to scroll to the end of a page when it includes interactive scroll-triggered elements.
An animated number counter is one of the cheapest micro-interactions you can add, because it needs no user input and takes seconds to configure.
There is a second, quieter reason I like these. A static statistic reads as a claim. An animated number counter reads as a live readout, closer to a dashboard than to marketing copy. That framing shift matters on pages where people arrive skeptical, like pricing pages and about pages. The animated number counter examples that perform best in my experience are the ones that lean into that dashboard feeling instead of fighting it.
What Separates a Good Animated Number Counter From a Bad One
Before the examples, three rules I apply to every animated number counter I ship. First, the count should finish in about one to two seconds. Anything slower and people scroll past mid-animation, which means they never see the real figure.
Second, every counter needs a label directly under it, because "48,000" on its own is noise.
Third, the counter fires once, on entering the viewport, and then it stays put. Counters that loop forever are the single fastest way to make a page feel like a scam.
Keep those three in mind as you read the animated number counter examples below. Almost every failure I have seen traces back to breaking one of them.
15 Animated Number Counter Examples Worth Copying
Each of these is a pattern I have either built or seen work on a live site. Treat them as blueprints rather than screenshots to admire, and steal the structure rather than the exact figures.
1. The Hero Trio Above the Fold
Three animated number counters in a single row, sitting right under the headline. This is the workhorse of animated number counter examples: customers, countries, and years, or whatever three numbers tell your story fastest.
2. The Full-Width Stat Bar Between Sections
A dark band of four animated number counters used as a divider between two content sections. It breaks up a long page and gives the eye somewhere to land.
3. The Live Visitor Counter in the Footer
A small animated number counter showing total visitors or page views to date. This one belongs in the footer, where it feels like a signature rather than a boast.
4. The Fundraising Goal Counter With a Progress Bar
The amount raised counts up while a progress bar fills beside it. Pairing the two makes the gap to the goal obvious in one glance.
5. The Uptime Percentage Counter on a Status Page
An animated number counter that climbs to 99.98% reads as a measurement, not a promise. Decimals matter here, so make sure your counter supports them.
6. The Money Saved Counter on a Pricing Page
Instead of listing a discount, point an animated number counter at the total dollars your customers have saved. It turns an abstract benefit into a figure people can picture.
7. The Downloads Counter on an App Landing Page
Downloads counting up next to the app store badges. Of all the animated number counter examples here, this is the one that most directly reduces install hesitation.
8. The Years in Business Counter on an About Page
A single large animated number counter running to the number of years you have operated, with the founding year underneath. Simple, and surprisingly effective for local businesses.
9. The Case Study Result Counter
Two or three animated number counters at the top of a case study showing the result before the story. Readers get the payoff first, then decide whether to read how you got there.
10. The Review Count Counter Beside Star Ratings
Stars alone are cheap. Stars plus an animated number counter running to 12,480 reviews turns a rating into evidence.
11. The Impact Counter for Nonprofits
Meals served, trees planted, hours volunteered. Nonprofits get the most emotional mileage out of animated number counters because the unit itself is the story.
12. The Team Size Counter on a Careers Page
Headcount, offices, and nationalities running as three animated number counters together. Candidates read those three numbers as a shortcut for how established you are.
13. The Countdown Counter on a Launch Page
The one animated number counter that is allowed to keep moving, because a countdown to launch is genuinely live data. Label the timezone.
14. The Inline Counter Inside a Blog Post
A single animated number counter dropped mid-article to dramatize one statistic you just cited. Used once per post, it works. Used three times, it becomes wallpaper.
15. The Counter Inside an Exit Intent Popup
"Join 84,000 subscribers" with the number animating as the popup opens. The motion buys you the extra half second people need to actually read the offer.
Where to Put an Animated Number Counter on Each Page Type
Placement decides whether an animated number counter earns its keep. Here is the cheat sheet I use when I am deciding which of these animated number counter examples fits a given page.
| Page Type | Counter to Show | Best Placement | Trigger |
|---|---|---|---|
| Homepage | Customers, orders, or countries | Directly under the hero headline | On page load |
| Pricing page | Total savings or plans sold | Between the table and the FAQ | On scroll into view |
| About page | Years in business, team size | Beside the founding story | On scroll into view |
| Product page | Review count and rating | Next to the add to cart button | On scroll into view |
| Case study | The headline result | Top of the page, before the narrative | On page load |
| Careers page | Headcount and offices | Above the open roles list | On scroll into view |
| Campaign or nonprofit page | Amount raised, impact units | Beside the donate button | On scroll into view |
The Mistakes I See Most Often
The most common one is the fake counter. I have lost count of the number of sites running an animated number counter that increments a "live" figure every few seconds using nothing but a random number generator.
People notice, and once they notice, every other number on your page becomes suspect. If the figure is not live, animate it once to its true value and stop.
The second mistake is ignoring motion preferences. About half the web now respects this: the HTTP Archive Web Almanac accessibility chapter found that 49% of desktop sites and 50% of mobile sites use the prefers-reduced-motion media query, up from 34% of mobile sites in 2022. Your animated number counter should be part of that half. The W3C's C39 technique for WCAG 2.2 covers exactly this case, and the fix is simple: when someone has asked for reduced motion, skip the count and render the final number immediately.
Nobody loses information, and people with vestibular sensitivity do not get hurt by your homepage. This is worth taking seriously given that Linearity's data found only 30% of websites with heavy interactivity are fully accessible.
Third is layout shift. If your counter starts at "0" and ends at "2,000,000," the element grows by several characters mid-animation and shoves everything around it. Reserve the width of the final number up front. Core Web Vitals are unforgiving here, and per the CrUX data summarized by Digital Silk, only 53.0% of sites passed all three Core Web Vitals thresholds. A row of badly built counters is an easy way to join the other 47%.
The last one is volume. Four animated number counters in a row is a stat bar. Twelve animated number counters spread across a page is a slot machine. When every number on the page is moving, none of them mean anything, and the animated number counter stops being a signal at all.
How to Build These Animated Number Counter Examples Without Code
You do not need a developer for any of the fifteen patterns above. The Poper Number Counter widget is what I reach for first, because it handles the parts people get wrong by default: the scroll trigger, the count duration, the thousands separators, decimals for percentages, and prefix or suffix characters like a currency symbol or a plus sign.
You set the start value, the end value, the label, and the styling, then paste one embed snippet into your site. It works the same on WordPress, Shopify, Webflow, Wix, Squarespace, or plain HTML, and you can update the number later from the dashboard without touching your site again.
If you would rather hand-roll it, the honest approach is an IntersectionObserver to detect when the counter enters the viewport, a requestAnimationFrame loop to step the value, and a prefers-reduced-motion check that short circuits the whole thing. That is maybe forty lines of JavaScript.
The reason I still use a widget for most animated number counter work is not the forty lines, it is that the widget already got the accessibility and layout shift details right, and I would rather spend that hour on the copy sitting next to the number.
One more thing worth doing regardless of which route you pick. Write the label before you pick the number. If you cannot write a five-word label that makes the figure meaningful, the number does not belong on the page, and no amount of animation will fix that.
The Short Version
Every animated number counter on this list does the same job in a different costume: it takes a fact you have already earned and makes people actually see it.
Pick two or three numbers that genuinely matter, give each one a plain label, animate them once when they scroll into view, respect reduced motion, and stop there. That founder's homepage did not need a redesign. It needed one number that moved.
If you want to try the pattern on your own site, start with Example 1 from the animated number counter examples above. Three stats under your headline, one to two second count, honest figures. It is a twenty minute change, and it is usually the one people notice first.
