CountUp
How it works
The first step to follow is to clone the Webflow project your can reach by clicking on the button below.
Once the project has been cloned, you have to add the script you find below within your Webflow project (before "body" tag in the page you want to show it).
Want to start from scratch?
You can use any text element in Webflow (Paragraph, Header, Text Block) that must have some custom attributes:
Instead of “linear” you can choose among the following attributes that represent the whole range of effects you can add:
- backInOut
- backIn
- backOut
- bounceOut
- bounceInOut
- bounceIn
- circInOut
- circIn
- circOut
- cubicInOut
- cubicIn
- cubicOut
- elasticInOut
- elasticIn
- elasticOut
- expoInOut
- expoIn
- expoOut
- quadInOut
- quadIn
- quadOut
- quartInOut
- quartIn
- quartOut
- quintInOut
- quintIn
- quintOut
- sineInOut
- sineIn
- sineOut
- linear
To set the number of digits after the digital point you want to display, insert this attribute:
To set the duration (in seconds), insert this attribute:
The final value of your counter will be the number you have entered in the appropriate element on Webflow.
Please note that you’re not allowed to copy, sell, rent, share or transfer this file nor to enable or allow others to use it using your account information.
How to add a custom attribute
-
Select the element you want to add the custom attribute to
-
Go to the Element settings Panel (D)
-
Add [+] a custom attribute
-
Specify the name and the value
-
Click Save
