Links

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;

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/[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 modified 5mo ago