The number counter begins at the specified start number and counts by 1 until the end number is reached. The counter will increment up or down depending on the start and end values provided.
Configuring the Number Counter component
Double-click the Number Counter component on the canvas, and head over to the Properties panel on the right side to browse the available settings. Read about what each of them do below.
Parameter | Description |
Start | The number the counter should start at. |
End | The number the counter should stop at. |
Prefix | Input a prefix that will show on the left side of the counter. |
Postfix | Input a postfix that will show on the right side of the counter. |
Location | Toggle on to determine the formatting based on user location. |
Duration | The time in seconds the animation should last. |
Delay animation start | Sets a delay before the counter starts in milliseconds. |
Easing | Select easing of the animation to modify the transition. |
Loop | Toggle on to play the animation continuously. |
Auto start | Toggle on to start the animation when the component enters the view. |
Decimal precision | The number of digits you want to show behind the decimal. |
Digit separator (thousands) | Specify the symbol for the thousands separator. |
Digit separator (decimal) | Specify the symbol for the decimal separator. |
Note: Only use whole numbers like -5, 34, or 3,047, and not fractional numbers such as -1.45, 1 3/4, or 5,736.1 in the 'Start' and 'End' fields.
Custom interactions
The Number Counter has custom interactions to adjust the experience to your needs. Below you can find what triggers and actions are custom to the Number Counter.
Trigger | Definition |
On end | When the Number Counter ends it initiates an action in the target. |
Action | Definition |
Start | The Number Counter starts playing the animation. |
Stop | The Number Counter stops playing the animation. |
Reset and continue | The Number Counter resets the animation and continues to play. |
Reset and stop | The Number Counter resets the animation and stops playing. |