Webflow Attribute Booster

Webflow Count Up Booster

Easily count up to a target number when the element is in view.

Getting Started ⬆️

Add a seamless countup animation to any Webflow website

Elevate your webpage with the Count Up 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.

This Booster can be added directly into your Webflow projects with our official Webflow App. You can install the official Boosters App. The Boosters app will add all the attributes and elements you need directly in your Webflow project.

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.

<!-- Flowbase Booster [Count Up] -->
<script src="https://cdn.jsdelivr.net/npm/@flowbase-co/boosters-countup@1.0.0/dist/countup.min.js" type="text/javascript"></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 which ones are important for you. If you aren't sure how to add attributes in Webflow, you can learn more.

You can add the following attributes to set the countup:

Name: fb-count Value: true
Name: fb-count-target Value: 2024
Name: fb-count-delay Value: 300
Name: fb-count-time Value: 5000

3. Component Attributes Table

View the full available attributes listed below

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

4. 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.

Did you find this helpful? 💕

Your support means the world to us! In just 10 seconds, you can make a big difference:

Leave a like on our Free Webflow Booster App.
Share what you built with us on Twitter! We re-post to thousandsThank you for being awesome! 🌟

Boosters App

Add this booster + more with the official webflow application.

Install Booster Application

*Official Webflow booster application