Counter
One of the default components we added to the pro-editor is the counter. It can show numbers counting from one number to the next. Because it has multiple states you can let it animate or count between different states. This can be done by linking to these states in the links panel.
From value
This is the starting number where the counters begins to count.
Steps
Here you can set the first number where the counter should count towards. You can add extra steps with the plus button. Make sure you give the steps a label name, so it's easy to link to these steps with the 'control element' click action.
Duration
The duration can be set in milliseconds. The counter will use the time to go from the starting number to the next step.
Decimals
This will add decimal numbers when needed.
Show leading zero's
To keep the size of a counter at the same amount of digits, you can check the box for leading zero's. That way the lower numbers will have zero's in front of them. For instance, the counter will count from 001 to 455. If you don't check the box it will go from 1 to 455 and will move when more digits are added.
Text in front & Text after
You can put any text or characters in front or after the number. This is mostly used for % or currencies.
Animation
In the animation tab you can choose a masked transition which will animate the numbers a bit by letting them move in a masked area. Try it out to see the result.
Styling
In a separate section in the right panel you can style the before text, counter and after text.
From value
This is the starting number where the counters begins to count.
Steps
Here you can set the first number where the counter should count towards. You can add extra steps with the plus button. Make sure you give the steps a label name, so it's easy to link to these steps with the 'control element' click action.
Duration
The duration can be set in milliseconds. The counter will use the time to go from the starting number to the next step.
Decimals
This will add decimal numbers when needed.
Show leading zero's
To keep the size of a counter at the same amount of digits, you can check the box for leading zero's. That way the lower numbers will have zero's in front of them. For instance, the counter will count from 001 to 455. If you don't check the box it will go from 1 to 455 and will move when more digits are added.
Text in front & Text after
You can put any text or characters in front or after the number. This is mostly used for % or currencies.
Animation
In the animation tab you can choose a masked transition which will animate the numbers a bit by letting them move in a masked area. Try it out to see the result.
Styling
In a separate section in the right panel you can style the before text, counter and after text.
Updated on: 24/11/2023