CountUp Animated Numbers

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

Overview

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

Credits

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

• Countup - https://github.com/inorganik/CountUp.js

• Waypoints - http://imakewebthings.com/waypoints/guides/getting-started/

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="https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@5.6.0/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.