Table of Contents
If you want a live, animated number up-counter you can drop into any site in Carrd, we have the code for you, which gives a clean counter that animates up to a target number as soon as the page loads.
You can use it for stats, milestones, goals, tallies, anywhere a growing number adds meaning.
👉 Live demo & code https://codepen.io/markbowley/pen/Eaygdxg
What It Does
This counter:
- Starts from
0and counts up to a defined value
- Smoothly animates using
requestAnimationFrame
- Formats the number with thousands separators
- Runs automatically on page load
Why it’s useful
Animated counters grab attention and show progress visually. They’re great for:
- Landing pages (users love dynamic stats)
- Portfolio numbers (projects completed, clients served)
- Product pages (units sold, users onboarded)
- Donations / goals (fundraising counters)
Because this implementation uses vanilla JavaScript with minimal markup and no dependencies, it’s lightweight and easy to adapt.
How it works
- The number to count up to is stored in a
data-targetattribute.
- JavaScript reads that target number.
requestAnimationFrameanimates the count over a defined duration.
- Each frame updates the text content with a formatted number.
Live demo & code: https://codepen.io/markbowley/pen/Eaygdxg
Find more code snippets for Carrd here: codefor.carrd.co.
Written by
