Articles on: The editor

Counter

The Counter component shows a number that counts from a start value to a target value. You can give a counter several steps, each with its own target value, and let a button or other element switch between them. You find the Counter in the editor's Add elements drawer, under Numbers.

Adding a counter

To add a counter and set the numbers it counts between:

In the editor, click Add in the left panel to open the Add elements drawer, and choose Numbers.
Drag Counter onto the canvas.
With the counter selected, click Settings in the Counter block of the right panel.
In the Values tab, enter the From value. This is the number the counter starts at.
Under Step(s), enter a Label and a To value for the first step. The To value is the number the counter counts to.
Optional: click + to add another step, and give it its own Label and To value.
In the Animation tab, set Duration (ms): the time each count takes, in milliseconds.

On the published page, the counter starts counting when it comes into view, as long as Auto Start is on (the default). It counts from the From value to the To value of the first step. Further steps only play when another element triggers them, see Switching between counter steps.

To preview the count in the editor, use the Counter block in the right panel. With one step, click Restart to replay the count. With two or more steps, click a step's label to preview that step.

Counter settings

The counter's settings open when you select the counter and click Settings in the Counter block of the right panel. The settings are split over four tabs: Values, Layout, Text and Animation.

Values tab

The Values tab of the counter's settings holds the numbers and how they are formatted:

From value: the number the counter starts at.
Auto Start: on by default. The counter starts counting when it comes into view on the published page. When you turn it off, the counter shows the From value and waits until a Control element action starts it.
Step(s): each step has a Label and a To value. The To value is the number the counter counts to, and the Label is the name you pick when another element switches to this step. Click + to add a step, and use the dots or arrows to move between steps. The trash icon deletes the step you are viewing; it appears when the counter has two or more steps. New steps are named "Label 2", "Label 3" and so on, so rename them to something recognisable.
Decimals: the number of decimal places, 0 by default. The counter always shows exactly this many decimal places, also for whole numbers. With Decimals set to 2, 100 shows as 100.00.
Thousands separator: how large numbers are grouped. Automatic (based on browser language) is the default, which means visitors with different browser languages can see different separators and decimal marks. Choose Period (10.000,00) or Comma (10,000.00) to show the same format to every visitor, or Disable to show no thousands separator.
show leading zero's: adds zeros in front of a number so it always has the same number of digits. The counter pads every number to the digit count of the largest value among the From value and all To values. For example, a counter from 1 to 455 then counts from 001 to 455. Without leading zeros it counts from 1 to 455, and the number gets wider as digits are added, so text next to it shifts.

Layout tab

The Layout tab of the counter's settings has one setting, Alignment. It sets how the number and the text before and after it are spread out horizontally within the counter. The options are start (the default), center, end, space between, space around and space evenly.

Text tab

The Text tab of the counter's settings adds text before or after the number, for example a currency sign or a % sign:

Text before: text shown in front of the number.
Text after: text shown after the number.

A new counter has "Km/h" filled in as Text after. Clear the field if you don't want text after the number.

Animation tab

The Animation tab of the counter's settings controls how the number moves:

Scrolling numbers: makes the digits roll into place inside a masked area, instead of changing in place. It only has an effect when Duration (ms) is above 0.
Duration (ms): the time, in milliseconds, that each count takes. The default is 1000 (1 second). It applies to every count: from the From value to the first step, and each time the counter moves to another step.

Visitors whose device is set to reduce motion see the end value straight away, without the count.

Switching between counter steps

A counter with more than one step only moves to another step when another element tells it to, through a Control element action. To switch steps with a button or another element:

In the counter's settings, give each step a clear Label.
Select the element that should trigger the change, for example a button.
In the right panel, open the Links tab.
Click Control element in the list of link types. If the element already has a link, add Control element as an extra action instead, from the Add extra action menu at the top of the Links tab.
Under Element, select the counter.
Under Action, choose what the counter should do.

The triggering element and the counter must be in the same scene; the Element list only shows elements in the current scene.

The actions to use for a counter are:

Next: counts to the next step. On the last step, it goes back to the first step.
Previous: counts to the previous step. On the first step, it goes to the last step.
A step's label: counts to that step.
Play: starts the count to the current step, also when Auto Start is off.
(Re)Start: resets the counter to the From value and counts to the first step again.

Moving to another step counts from the number currently shown to that step's To value.

Starting a counter on click

To start a counter only when a visitor clicks a button, instead of when it comes into view:

Select the counter and click Settings in the Counter block of the right panel.
In the Values tab, uncheck Auto Start.
Select the button that should start the counter.
In the right panel, open the Links tab.
Click Control element in the list of link types (or add it from the Add extra action menu if the button already has a link).
Under Element, select the counter.
Under Action, choose Play or (Re)Start.

Styling the counter

The counter's text is styled in the Styling block of the right panel, below the Counter block. Select the counter to see it. The Styling block has three parts, each styled separately:

Before text: the text in front of the number.
Counter: the number itself.
After text: the text after the number.

Frequently asked questions

How do I remove "Km/h" from my counter?

A new counter has "Km/h" filled in as text after the number. To remove it, select the counter, click Settings in the Counter block of the right panel, open the Text tab and clear the Text after field.

Why do visitors see different thousands separators in my counter?

The counter's Thousands separator setting is Automatic (based on browser language) by default, so the separator and decimal mark follow each visitor's browser language. To show the same format to everyone, select the counter, click Settings in the Counter block of the right panel, and in the Values tab set Thousands separator to Period (10.000,00) or Comma (10,000.00). Disable removes the thousands separator, but the decimal mark still follows the visitor's browser language.

Why does my counter count again when I scroll back to it?

On the published page, a counter resets to its From value when its scene leaves view. When the scene comes back into view, a counter with Auto Start on counts again from the From value to the first step. If only the counter scrolls out of view while its scene stays on screen, it keeps its number and doesn't count again.

Updated on: 29/10/2026