# CountUp Animated Numbers

## Overview <a href="#display-captions-in-webflows-lightboxes" id="display-captions-in-webflows-lightboxes"></a>

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 <a href="#usage-notes" id="usage-notes"></a>

There are two basic use-cases.&#x20;

### 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.&#x20;

### Group-triggered countups

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

To do that,&#x20;

* 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 ) <a href="#getting-started-nocode" id="getting-started-nocode"></a>

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

### STEP 1 - Add the Library <a href="#step-1---add-the-library" id="step-1---add-the-library"></a>

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

{% code overflow="wrap" %}

```html
<script type="module" src="https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@5.6.0/src/nocode/webflow-countup.min.js"></script>

```

{% endcode %}

### STEP 2 - Apply the custom attributes and code pieces based on your configuration needs <a href="#step-2---apply-the-custom-attributes-to-the-elements-you-want-to-affect" id="step-2---apply-the-custom-attributes-to-the-elements-you-want-to-affect"></a>

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://attr.sygnal.com/sa5-countup/countup.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.