GSAP Animations Documentation - Agentflow Webflow Template

Number Counter Animation

What It Does

The number counter animation makes numbers count up from 0 to a target value when they scroll into view. Perfect for statistics, achievements, or any numeric data.

How to Set It Up

Required Structure:

You need two things:

1. A text element or span with the class Count Up Number Animation
2. A custom attribute on that same element: data-count with your target number

Step-by-Step Setup

1. Select the text element that will display your number
2. If you want only part of the text to animate (like "200+" where only "200" animates), wrap just the number portion in a Span
3. Add the class Count Up Number Animation to the span (or text element)
4. Click on the element's settings on the right sidebar and add a custom attribute:
   • Name: data-count
   • Value: your target number (e.g., 99)

Adjusting Speed

If you want to change the counter's speed, you'll need to modify the duration value in the custom code. The value is measured in seconds (eg. 2 gives it a duration of 2 seconds), and you need to look for this line:

Number formatting

The counter automatically formats the values into thousands:

• data-count="5000" will be displayed as 5,000
• the data-count number shouldn't be separated by commas, the counter will do it automatically

Decimal Numbers

The counter automatically detects if your target number has decimals:

• data-count="5" will count whole numbers: 0, 1, 2, 3, 4, 5
• data-count="5.5" will count with one decimal: 0.0, 1.1, 2.2... 5.5

Multiple Counters

You can have multiple counters on the same page. Each counter:

• Animates independently when it enters the viewport
• Has a small staggered delay so they don't all start at once
• Only animates once (won't re-animate if you scroll back up)

Designer visualization

The number that you see in the designer will be overridden by the value set on the Custom Attribute, but you may still set the correct number on the designer for easier visualization.