Overview 🔢
Add a CountUp animation to any Webflow website in seconds.
Countup animations in web design offer a captivating way to display numerical data. By gradually increasing values, these animations add dynamism and visual interest, making them ideal for showcasing achievements, statistics, or other data-driven content. This approach enhances the user experience with its appealing and interactive nature.
This guide walks you through adding this feature for free, or you can use our free Booster app for a one-click integration into your projects. Install the official Boosters App to get started.
Instructions ✍️
1. Add the CountUp script to your project
Copy the script and paste it into the <head> section of your custom code settings. If you prefer a quicker setup, you can use our Webflow Boosters App to install the script and add the component to your project instantly (100% Free).
<!-- Flowbase Booster [Count Up] -->
<script src="https://cdn.jsdelivr.net/npm/@flowbase-co/boosters-countup@1/dist/countup.min.js" type="text/javascript"></script>2. Add the Counter Text Element
Place any text-element on your page where you want the number to appear. While any text-element will work, a plain text element is usually the best choice. You can style the text as you need, and add multiple elements in you wish to show more than one.
3. Add Attributes to Counter
Once you've added the text-element as described above, simply add the following attributes to apply your desired settings. You can adjust the values to meet your specific requirements.
- Name:
fb-countand Value:true. - Name:
fb-count-targetand Value:999. This is the value that we will count up to, you can set any number even ones with decimals. - Name:
fb-count-timeand Value:5000. This value sets the duration in ms of the count time, so in this case it would be 5 seconds. - Name:
fb-count-delayand Value:800. This value sets the delay in ms before the counter starts.
For prefixes and suffixes (e.g., $, %, £), add a separate text element next to your CountUp element.
4. Publish and Review
After adding the attributes and styling your text element, publish your site to make the changes live. If you’re working with a staging environment, push the updates to the staging server first to review the functionality. Once you’ve confirmed everything is working as expected, publish the site to your live domain.
When the element is scrolled into view, it should count up smoothly from zero to your specified number. Make sure to test this on different devices and browsers to ensure consistent performance.
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 thousands!
Thank you for being awesome! 🌟
