Webflow Boosters

Count Up Booster

Webflow booster that animates numbers counting from 0 to your desired target value. Perfect for statistics and number sections

Add this in seconds with the Boosters app, or install it manually with the guide below.

Getting Started 🫧

Elevate your webpage with the CountUp Webflow Booster, a user-friendly booster that smoothly animates numbers from 0 to your desired target value, bringing them to life. This effect is popular for showcasing statistics and is an easy way to enhance your webpage's visual appeal.

Install Instructions ✍️

1. Add the booster script to your project.

Copy the script source listed below, and add it to the <head> tag of your custom code settings. If you aren't sure about custom code in Webflow, you can click here to learn more.

<script src="https://cdn.jsdelivr.net/npm/@flowbase-co/boosters-countup@1.0.0/dist/countup.min.js"></script>
2. Add the attributes to a text element

For this Booster, attributes must be added to a text element. You can add any type of text element in Webflow and apply the styles as suitable for your project. Review the table below to see the available attributes so you can decide on which ones are important for you. If you aren't sure how to add attributes in Webflow, you can learn more.

Attribute Name Attribute Value Description
fb-count true or false Simple and on/off method for the animation
fb-count-delay eg. 2000 Set the delay (ms) before the countup starts
fb-count-target eg. 1992 Specify the target number to count up too
fb-count-time eg. 1000 Specify the speed (ms) to complete the count

3. Publish & Test 🚀

Once you've followed the steps above and have added both the script and the attributes, you can publish your page. View your live staging domain to test the booster in action.