The Number Counter component animates numbers by counting from a starting value to an ending value. It can count upward or downward depending on the values you set. This feature is useful for displaying statistics, milestones, or any dynamic numerical data.
Configuring the Number Counter
To configure the Number Counter:
Double-click the Number Counter component on the canvas.
Open the Properties Panel on the right-hand side.
Adjust the following settings:
Number Settings
Start: The number where the counter begins (e.g.,
0).End: The number where the counter stops (e.g.,
100).⚠️ Use only whole numbers such as
-5,34, or3,047.Do not use fractions or decimals such as
-1.45,1 3/4, or5,736.1.
Display Options
Prefix: Text or symbol shown before the number (e.g.,
$for currency).Postfix: Text or symbol shown after the number (e.g.,
%for percentages).Location: Toggle on to format the number based on the viewer’s locale.
Animation Settings
Duration: Length of the animation in seconds (e.g.,
3for a 3-second count).Delay Animation Start: Delay in milliseconds before the counter begins.
Easing: Choose an easing style (e.g., linear, ease-in, ease-out) to control animation flow.
Loop: Toggle on to make the counter repeat continuously.
Auto Start: Toggle on to start the animation automatically when the component enters view.
Formatting Options
Decimal Precision: Number of digits to display after the decimal point.
Digit Separator (Thousands): Symbol used to separate thousands (e.g.,
,→ 1,000).Digit Separator (Decimal): Symbol used for decimals (e.g.,
.→ 1.5).
Custom Interactions for Number Counter
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.
Triggers
On End: Executes an action when the Number Counter finishes its animation.
Actions
Start: Begins the counter animation.
Stop: Stops the counter animation.
Reset and Continue: Resets the animation to the starting value and continues counting.
Reset and Stop: Resets the animation to the starting value and stops it.
For more information on interactions, see: Interaction Triggers and Actions.
Best Practices
Use the Prefix and Postfix fields to make stats more meaningful (e.g.,
$5,000,75%).Keep animations short (2–5 seconds) for a better user experience.
Combine the Number Counter with interactions to create engaging visual effects.