Skip to main content
Number Counter

Animate counting numbers using the Number Counter component.

Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

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.

Number Counter Element in Vev

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.

Did this answer your question?