Animation •
v1.0.0 @synqro/counter
Animate numbers on scroll. Auto-detects prefix, suffix and separators.
Drop sl-counter on any element that contains a number. It detects the number, any prefix ($, +) and suffix (%, +, EUR), the separator (, ) and decimal places — then animates when scrolled into view.
Install • Paste in Project Settings → Custom Code → Footer
HTML
<!-- [Synqro Labs] Counter -->
<script src="https://cdn.jsdelivr.net/npm/@synqro/counter@1/dist/index.min.js"></script>Installation
- 1 Add the script to your Webflow project. Go to Project Settings → Custom Code → Footer Code and paste the snippet above.
- 2 Add the custom attributes to the relevant elements in the Webflow designer — see the table below.
- 3 Publish your site. The script initializes automatically on DOMContentLoaded.
Configuration
Select the element in the Webflow designer and add these custom attributes under the Element Settings panel.
| Attribute | Value | Description |
|---|---|---|
| Required | (no value) | Marks the element as a counter. |
| | 2000 | Animation duration in milliseconds. |
| | 300 | Delay before starting (ms). Useful to stagger counters. |
| | linear | ease-out | ease-in | ease-in-out | Easing function. Default: ease-out. |
| | false | Set to false to replay the animation every time the user scrolls back. |
| | 0 | Start value. Set higher than the target number to count down. |
| | 0.2 | How much of the element must be visible to trigger (0–1). |
| | , / space | Override the auto-detected thousands separator. |
| | 2 | Override the auto-detected number of decimals. |
| | $ | Override the auto-detected text before the number. |
| | % | Override the auto-detected text after the number. |
Examples
Basic — auto-detects everything
HTML
<h2 sl-counter>1,250</h2>
<h2 sl-counter>$45,000+</h2>
<h2 sl-counter>99.9%</h2>Staggered — numbers appear one after another
HTML
<div sl-counter sl-counter-delay="0">100</div>
<div sl-counter sl-counter-delay="200">200</div>
<div sl-counter sl-counter-delay="400">300</div>Count down
HTML
<div sl-counter sl-counter-start="1000">0</div>Tips & notes
- Bind a CMS number field to the text content — auto-detection handles any formatting.
- CSS hooks — sl-counter-active is added when the animation starts, sl-counter-done when it ends.