CountUp Animated Numbers

Add cool animated numeric countups to your site with just an attribute.


This library provides a NOCODE way to add animated number countups in Webflow.


This is just a wrapper library that adds nocode abilities using two top-notch existing libraries;

Usage Notes

There are two basic use-cases.

Self-triggering countups

Place the custom attribute wfu-countup on any text element that contains a numeric value, and the library will automatically begin a count up from 0 just as that item scrolls into view.

Group-triggered countups

In certain cases, you'll have a series of items that you want to all start and finish together.

To do that,

  • Apply the custom attribute wfu-countup on any number-containing text element, and assign it a group name e.g. group1

  • Then, on an element or container that begins slightly higher on the page, place a custom attribute of wfu-countup-trigger = group1 using the same name.

Getting Started ( NOCODE )

This library does not require configuration, so we've taken a NOCODE approach to its design.

STEP 1 - Add the Library

Add this JS reference to the BODY of your site or page. This is the base configuration.

<script type="module" src="[email protected]/src/nocode/webflow-countup.min.js"></script>

STEP 2 - Apply the custom attributes and code pieces based on your configuration needs

See above, and the feature-specific sub pages for details.

Last updated