Atomic Element · Pro
Type "1,250" and the number counts up as it scrolls into view, commas intact. The "$", the number and the "+" are separate elements you style with Elementor 4 Classes.
Need something free? The free Progress Bar also animates a percentage figure when it scrolls into view.
The short answer
The Elementor counter widget from Animation Addons is an Elementor 4 Atomic Element that animates a number from a start value to the figure you type, once it scrolls into view. Prefix, number and suffix are separate atomic children, each styled on its own, and commas or decimals in your figure are kept while it counts.
Why pay for a counter when Elementor's classic Counter is free? Three reasons: it is a native Atomic Element that takes your Classes and Variables, the "$", number and "+" each have their own Style panel, and it waits until visitors actually reach it. If none of that matters to you, the classic Counter does the basic job.
| Plan | Pro Animation Addons Pro |
|---|---|
| Element type | Native Elementor 4 Atomic Element (composite) |
| Works with | Elementor Free and Elementor Pro, Atomic Editor on |
| Child elements | Prefix, Number, Suffix (Paragraph elements); Heading elements also accepted |
| Settings | Start Number, Duration (ms) (100 to 10,000) |
| End value | The text you type in the Number element |
| Trigger | Starts when about 30% of the counter is visible; runs once per page view |
| Number format | Thousand separators (shown as commas) and decimals kept as typed |
| Animation engine | Browser animation frames with an ease-out curve; no GSAP |
| Limits | No built-in label (add a Paragraph or Heading beside it); separators are shown as commas |
| Plugin version | Animation Addons for Elementor 4.3 · Last updated October 2026 |
Demo variations
Every demo is built with the Counter, part of Animation Addons Pro, plus native Elementor 4 elements. Extensions they add are named on each card.
A dark, full-width band with four large white counters in an Elementor 4 Grid, each with a small grey label underneath.
Three white cards on a light grey page; each has a huge decimal figure, a smaller, lighter unit and a muted caption.
One large green money figure centred above a progress bar and a "Donate" button.
A small pill-shaped badge in warm orange next to a "Book your seat" button; the number runs down from 40 to the seats left.
An elegant serif layout on cream with three counters separated by thin vertical rules, each with a line icon above.
One headline-sized sentence where the result figure is in the brand colour and counts up inside the line.
Features
Every option below is a real control in the Counter panel or part of how the element renders. Nothing here needs custom code.
There is no "end value" field. What you type in the Number element is the target, so the figure you see on the canvas is the figure that ships.
The count starts when about 30% of the counter is visible and runs once. A stat at the bottom of a long page still animates in front of the visitor.
Type "1,250" and it counts with thousand separators; type "99.9" and it keeps one decimal place all the way up.
Prefix, Number and Suffix are separate atomic children. Make the "$" small and grey and the "+" your accent colour, each from its own Style panel.
Start Number sets where the count begins; set it higher than your figure to count down. Duration (ms) runs from 100 to 10,000.
Visitors who turned on "reduce motion" in their system settings see the final number at once.
After you change a setting, the counter replays on the canvas, and it never runs while you are typing in it.
Built on the atomic base
Why it mattersFont size, weight and colour set on the Counter flow down to all three parts, so one change restyles the whole stat. Override a single part, like the "+", from its own Style panel, and reuse the same Classes on every stat site-wide.
Step by step
Six steps, from installing the plugin to publishing the page. The bold names are the exact labels you will see in the Elementor 4 panel.
Get Animation Addons ProInstall and activate Animation Addons for Elementor and Animation Addons Pro, then open a page with the Atomic Editor on.
Find Counter in the Animation Addons atomic group and drag it onto the canvas. It shows "50 +".
Click the Number and type your target, for example "1,250" or "99.9".
Edit the Prefix and Suffix text, or leave the Prefix empty.
Select the Counter and set Start Number and Duration (ms) in the Counter section.
Add a Paragraph label below, style the parts, preview and publish.
Honest comparison
Elementor 4 has no native atomic counter. Elementor Free still ships the classic Counter widget, which runs on Elementor 4 but is not an Atomic Element.
| Feature | Elementor classic Counter | Animation Addons Counter |
|---|---|---|
| Plan | Elementor Free | Animation Addons Pro |
| Element type | Classic widget | Native Elementor 4 Atomic Element |
| End value | Ending number field in the panel | Typed in the Number element |
| Prefix and suffix | Text fields in the panel | Separate atomic children with their own Style panels |
| Thousand separator | On/off, as default, dot or space | Kept from how you type the number, shown as commas |
| Built-in title | Yes, with HTML tag and position above, below, left or right | No, add a Paragraph or Heading beside it |
Compared with Elementor 4.3.3 (September 2026).
The classic Counter is a fine free choice when you want a title built in or dot separators. Choose the Animation Addons Counter when your stats must follow your Elementor 4 Classes and Variables.
Who it's for
The people who get the most out of it, and what they use it for.
Showing client and project numbers on the home page.
Highlighting uptime, users or volume.
Displaying amounts raised next to a progress bar.
Showing places left.
FAQ
With Animation Addons Pro active, drag the atomic Counter onto your page, click the Number and type your target, such as 1,250. Set Start Number and Duration (ms) in the Counter section. The Animation Addons Counter then counts from the start number to your figure when it scrolls into view.
Counters that start on page load finish before a visitor reaches a stat lower down. The Animation Addons Counter waits until about 30% of the element is visible, then counts once, so visitors see the animation happen. In the Elementor editor it replays after each settings change instead.
Yes. The Animation Addons Counter reads the format from what you type. Enter 1,250 and it counts with thousand separators; enter 99.9 and it keeps one decimal place throughout. Separators are always displayed as commas, so for dot or space separators use Elementor's classic Counter instead.
No. The Animation Addons Counter loads one small script that uses the browser's own animation frames and IntersectionObserver, with no GSAP. The figure you typed is in the page HTML, so search engines and no-script visitors read the real number. If neighbouring text shifts while it counts, give the Number a minimum width.
Yes. With "reduce motion" turned on in their operating system, visitors see the Animation Addons Counter's final number immediately, with no counting. The prefix, number and suffix are plain text elements, so screen readers read the stat as written, such as "$48,500". Keep a visible label beside each counter so the figure has context.
Yes. In the Animation Addons Counter, set Start Number higher than the figure you type in the Number element. A Start Number of 40 and a Number of 12 runs down to 12, which suits "seats left" or "places remaining" messages on event and course pages.
No. The atomic Counter is part of Animation Addons Pro and runs on Elementor Free or Elementor Pro with the Atomic Editor on. The free Animation Addons for Elementor plugin includes the Progress Bar, which animates its percentage figure when it scrolls into view, a good free option for single percentages.
More answers in the FAQ · Documentation · Free vs Pro
Pairs well with
Elements that work well with the Counter on the same page or template.
Type the figure, pick a duration, and style every part with Elementor 4 Classes.
