How to add an attribute:

close icon
Hey! Give us some feedback here.

Number Count

Count a number from an initial value to an end value.

Number Count

Webflow Libraries component

Install Finsweet in Webflow Libraries
Copy this component inside Designer
Use this docs page to further customize
Scroll to docs
Step #1

Copy the Solution <script> and paste into the <head> of your page

copy icon
Copy Script
Step #2

Implement in Webflow

Apply attributes to elements on the page

Below is a list of elements and options that are used to create this Attributes functionality. Click any of them to see more details.

navigator arrow
Number
I want this

Text Element

to count from an initial value to an end value.
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-numbercount-element
copy icon
Value
number
copy icon
The text element to be counted up or down from initial to end.

If using multiple Number Count number elements on the page, instance numbers (number-1, number-2, etc.) are not required.
navigator arrow

Option

Start
The value to start counting from
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-numbercount-start
copy icon
Value
0
copy icon
The value to start counting from.

If counting from 1000 to 2000, the start value would be 1000.

If no start value is provided, the default is 0.
Where?
Add to the element with fs-numbercount-element = "number"
navigator arrow

Option

End
The value to end counting to
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-numbercount-end
copy icon
Value
100
copy icon
The value where the counter stops.

If counting from 1000 to 2000, the end value would be 2000.

If no end value is provided, the default is the value of the Text Element.
Where?
Add to the element with fs-numbercount-element = "number"
navigator arrow

Option

Duration
The option to set an initial value for the input
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-numbercount-duration
copy icon
Value
1000
copy icon
Amount of time in milliseconds (ms) to count from the start to the end value.

If no duration is defined, the default value is 1000ms (1 second).


Where?
Add to the element with fs-numbercount-element = "number"
navigator arrow

Option

Threshold
The option to set an initial value for the input
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-numbercount-threshold
copy icon
Value
25
copy icon
Defines when the number count animation should start counting based on the element's scroll position on the screen.

Values are based on % of viewport.

0 = the animation starts when the element is entering from the bottom.

50 = the animation starts when the element is at the middle (50%) of the screen.

100 = the animation starts when the element is at the top of the screen.

If no threshold is defined, the default is 25.
Where?
Add to the element with fs-numbercount-element = "number"

Working examples

See this solution working live in this Webflow project.

Example 1
Number Count 1 - Default
Copy and paste this example inside Webflow Libraries
Go to Webflow Libraries
240
Hours of work
16
Cups of coffee
4
Projects created

Developer documentation

external link icon

Next time implement inside Webflow

external link icon

Need help? Use the Automated Support Service

Subscribe

Sign up for future releases!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.