counter scroll numbers animated stats property scroll-driven animated stats section counters scroll-driven KPI numbers landing page metric animations static numbers lack visual impact want counting animation on scroll without JS need animated stats section
Scroll Counter
Fetch snippet JSON:
curl https://webspire.de/snippets/scroll/scroll-counter.json
Count on entry
View trigger
+
Teams activated after the block enters
%
Counts up while the stat card is being revealed
No JS counter loop required
Background
Customize
Quick Start
<span class="scroll-counter text-4xl font-bold" style="--counter-target:500"></span>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion, @supports fallback
- Size
- 717 bytes · 38 lines
- Custom Properties
-
--counter-target - Classes
-
.scroll-counter
counter scroll numbers animated stats property scroll-driven
Uses @property with <integer> syntax to make a CSS custom property animatable as a number, combined with counter-set and content: counter() to display the animated value. Driven by scroll position.
Animated stats section
<div class="flex gap-8 text-center">
<div>
<span class="scroll-counter text-4xl font-bold" style="--counter-target: 500"></span>
<span class="text-4xl font-bold">+</span>
<p class="text-sm text-slate-500 mt-1">Teams</p>
</div>
<div>
<span class="scroll-counter text-4xl font-bold" style="--counter-target: 50"></span>
<span class="text-4xl font-bold">k</span>
<p class="text-sm text-slate-500 mt-1">Downloads</p>
</div>
</div>