Make the numbers in a stats section count up when visitors see them. Choose where it starts and ends, how long it takes, how the speed changes and how the number is written, then copy the HTML, CSS and small JavaScript snippet. It works with no library and can start only when the number scrolls into view.
Counters work for headline figures that a visitor should notice: customers served, years in business, projects delivered, a rating. Movement draws the eye to the number for a moment, and a number that grew in front of the visitor feels more earned than one that sat there.
They work against you when overused. Three or four numbers in a row is a good stats strip; a whole page of them is noise. Put the numbers where they back up a claim, near a headline or a call to action, and make sure each one is real and can be explained if a visitor asks.
The script formats every frame the same way: round to the chosen number of decimals, split off the whole part, insert the separator every three digits from the right, and add the prefix and suffix. That keeps the final frame identical to the number you typed, with no jump as the animation stops.
Separator styles vary by country. Many English-speaking regions write 1,234.5, much of continental Europe writes 1.234,5, and some regions use a space for thousands. Choose the style your visitors expect. Using decimals on a count of whole things, such as customers, looks odd, so keep decimals for money and ratings.
The animation uses requestAnimationFrame, which runs once per screen refresh and pauses when the tab is hidden, so it does not waste battery. Updating a short piece of text on each frame is cheap; the digits are the only thing changing, and the layout around them stays still.
Screen readers can announce a changing number many times as it counts, which is annoying. If that matters on your page, give the element an aria-label holding the final value and mark it with aria-live set to off, so the number is read once. Reduced motion is already handled in the generated code.
On every animation frame the script works out how much of the duration has passed, as a fraction from 0 to 1. It passes that fraction through the easing curve and sets the number to start + (end - start) x eased fraction, then writes the formatted result into the page.
Easing changes the speed of the count. Linear moves at a steady rate. The ease-out options start fast and slow down as they reach the end number, which feels natural. Ease in and out starts slowly, speeds up and slows down again. Halfway through the time, an ease-out cubic count has covered 87.5 percent of the distance.
The HTML already contains the final formatted number, so the correct value is there without any script. When the script runs it replaces the text with the starting number and counts up to it.
Yes. If the visitor has asked their device to reduce motion, the script skips the animation and shows the final number straight away.
Yes. Each number is a separate element with its own start, end and settings stored in data attributes, and the one script animates all elements that share the class. Copy the element, change its attributes and label.
Related: CSS shadow generator, CSS layout generator, Landing page copy generator.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.