@synqro/counter

Animate numbers on scroll in Webflow. Auto-detects numbers, prefixes and suffixes from your text content.

Installation in Webflow

1. Add the script to your site

   Go to Project Settings → Custom Code → Footer Code and paste:

   <!-- [Synqro Labs] Counter -->
   <script src="https://cdn.jsdelivr.net/npm/@synqro/counter@1/dist/index.min.js"></script>

2. Add the attribute to your elements

   Select any element containing a number (Heading, Text Block, etc.) and add the custom attribute sl-counter (no value needed).

3. Publish your site

Custom Attributes

Select the element containing the number, then add these custom attributes:

| Attribute | Value | What it does | | ---------------------- | ---------- | -------------------------------------------------------- | | sl-counter | (no value) | Required. Marks the element as a counter. | | sl-counter-duration | 2000 | Animation duration in milliseconds (default: 2000). | | sl-counter-delay | 0 | Delay before starting in ms. Useful to stagger counters. | | sl-counter-easing | ease-out | Easing: linear, ease-out, ease-in, ease-in-out. | | sl-counter-once | true | Set false to replay the animation on every scroll. | | sl-counter-start | 0 | Start value for the animation. | | sl-counter-separator | auto | Thousands separator. Override the auto-detected value. | | sl-counter-decimals | auto | Decimal places. Override the auto-detected value. | | sl-counter-prefix | auto | Text before the number. Override the auto-detected value.| | sl-counter-suffix | auto | Text after the number. Override the auto-detected value. | | sl-counter-threshold | 0.2 | How much of the element must be visible to trigger (0–1).|

How It Works

The script reads the text content of your element and automatically detects:

• The number: 1,250 → animates to 1,250
• Prefixes: $45,000 → keeps the $ during animation
• Suffixes: 99.9% → keeps the % during animation
• Separators: 1,250 → keeps the , formatting
• Decimals: 99.9 → keeps 1 decimal place

You don't need to configure anything — just put sl-counter on the element and it figures out the rest.

Examples

Basic — Stats section

Add sl-counter to each number element. That's it.

• 1,250 → counts from 0 to 1,250
• $45,000+ → counts from $0 to $45,000+
• 99.9% → counts from 0.0% to 99.9%

Staggered — Numbers appear one after another

Add an increasing sl-counter-delay to each element:

• First number: sl-counter-delay = 0
• Second number: sl-counter-delay = 200
• Third number: sl-counter-delay = 400

Slow easing

Set sl-counter-duration to 3000 and sl-counter-easing to ease-in-out for a slower, smoother animation.

With CMS

Bind your CMS number field to the element's text content. The script auto-detects the number regardless of formatting.

CSS Classes

Two classes are added automatically — use them in Webflow for interactions or custom styling:

| Class | When | | ------------------- | ------------------------------ | | sl-counter-active | Added when the animation starts | | sl-counter-done | Added when the animation ends |

Tips

• Works on any element (Heading, Text Block, Paragraph, etc.)
• No styling included — style your numbers however you want in Webflow
• The animation triggers when the element scrolls into view
• Set sl-counter-once to false if you want the counter to replay every time the user scrolls past it