Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel
Animated Stats Counters
Responsive · Animated
Stats With Logos (Dark)
Responsive · Animated
Scrolling Logo Cloud
Responsive · Animated
Testimonial Wall
Responsive · Animated
Testimonial Carousel
Responsive · Animated
Testimonial Spotlight
Responsive · AnimatedAnimated Stats Counters — Free Website Section Template
Stats & logos · v1.0.0 · Updated 2026-10-20 · Responsive · GSAP animation · HTML, React & Vue
What's included
Features
About this section
Animated Stats Counters — Free Stats Section Template
Animated Stats Counters turns your key numbers into a moment: a row of big figures that count up from zero as the section scrolls into view, each with a label and a short note, under an optional centred heading. Numbers like "12,000+ teams" and "99.99% uptime" are some of the fastest ways to show scale and reliability.
Counts any format
Type the number exactly as you want it shown, such as $2.5M, 12,000+, 99.99%, 4.9/5 or 3.4×, and the counter keeps the prefix, suffix, thousands commas and decimal places while it counts. When it finishes, the original text is restored exactly.
Real numbers for everyone
The HTML always contains the final values, so search engines, screen readers and visitors without JavaScript see the real figures. The count runs once with GSAP and ScrollTrigger, only when each number scrolls into view, and never for people who prefer reduced motion.
Edit and style
Add up to six stats, reorder them and add optional notes. The numbers use a subtle text gradient from your text colour to your brand colour, with tabular figures so they don't jiggle while counting. On phones the stats sit in a two-by-two grid.
Export it
Download HTML or a ZIP, copy a React or Vue component, or fork into My Code. For stats with icons and logos on a dark background, see Stats With Logos.
Why use it
Why Use the Animated Stats Counters
How it’s different
How It’s Different From Other Free Section Templates
Step by step
How to Use
- 1Edit the contentFill in the heading and stats in the panel. Switch the heading on or off. Wrap words in *asterisks* to colour them.
- 2Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
- 3Match your brandPick a colour preset or exact colours, choose heading and body fonts from Google Fonts or your own uploaded font, set the corner radius and width, or apply your brand kit.
- 4Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
- 5Save and exportSave it to My designs, then export a single HTML file, a ZIP with your images, a React or Vue component, or fork it into My Code.
Real-world uses
Common Use Cases
Got questions?
Frequently Asked Questions
Any text with a number in it: prefixes like $ or €, suffixes like +, %, M, k, × or /5, thousands separators with commas and any number of decimal places. The first number in the text is animated and everything around it stays.
Yes. The HTML contains the final values; the count-up only changes them briefly in the browser when the section scrolls into view, then restores the exact original text.
No, once per page load, when each number first comes into view. It never runs for people who prefer reduced motion.
Up to six. Three or four read best in one row; on phones they wrap into two columns.
It saves an editable copy of your Animated Stats Counters in My Code, the UI Snippets code editor: the section markup goes in the HTML panel, its CSS (theme variables, base styles and layout) in the CSS panel, and the GSAP library is added as a CDN link, so you can keep refining the code and save your own versions.
Yes. It is free for personal and commercial websites, with no sign-up, no watermark and no attribution required. Everything runs in your browser and your edits are saved locally.