Webflow Libraries component
Install Finsweet in Webflow Libraries
Copy this component inside Designer
Use this docs page to further customize
Scroll to docs
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.
Add this attribute
Description
Name
fs-numbercount-element
Value
number
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.
If using multiple Number Count number elements on the page, instance numbers (number-1, number-2, etc.) are not required.
Add this attribute
Description
Name
fs-numbercount-start
Value
0
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.
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"
Add this attribute
Description
Name
fs-numbercount-end
Value
100
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.
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"
Add this attribute
Description
Name
fs-numbercount-duration
Value
1000
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).
If no duration is defined, the default value is 1000ms (1 second).
Where?
Add to the element with fs-numbercount-element = "number"
Add this attribute
Description
Name
fs-numbercount-threshold
Value
25
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.
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"
Add this attribute
Description
Name
fs-numbercount-locale
Value
{LOCALE}
Define the format of the number using the provided locale. Users can define any BCP 47 language tag or use auto to use the browser's locale.
Some examples below:
en-US (United States) = 1,234
pt-BR (Brazil) = 1.234
es-ES (Spain) = 1.234
Some examples below:
en-US (United States) = 1,234
pt-BR (Brazil) = 1.234
es-ES (Spain) = 1.234
Where?
Add to the element with fs-numbercount-element = "number"
Developer documentation
Check the dev documentation
Next time implement inside Webflow
Use Finsweet Extension
