← Back to Documentation

Documentation

Component: Digital Counter Animated numbers triggered on scroll

The Digital Counter component animates numeric values from zero to the target number. It is commonly used for statistics, KPIs, achievements, and marketing highlights. The animation starts automatically when the block enters the viewport.

Download Animmaster Vite Template Save your time — start now

What is a digital counter?

A digital counter animates numeric values to visually represent statistics. Instead of showing static numbers, values smoothly count up when the user scrolls to the block, creating a stronger visual impact.

How it works
The component relies on the Watcher (Intersection Observer). When the parent block enters the viewport, all counters inside start animating.

Component location

Files are located in src/components/layout/digcounter. Inside you’ll find:

  • JS file with counter logic and animation.
  • HTML example snippet.
  • SCSS file for counter styling.

Basic usage

Add data-anim-digcounter to each numeric element. The parent wrapper must include data-anim-watcher to trigger animation.

Digital counter — basic markup

<div data-anim-watcher class="stats">
	<div data-anim-digcounter class="stats__item">1500</div>
	<div data-anim-digcounter class="stats__item">500</div>
	<div data-anim-digcounter class="stats__item">800</div>
</div>
Important
Without data-anim-watcher on the parent, the animation will not start.

Animation speed

You can control the animation duration for each counter individually using data-anim-digcounter-speed. The value is specified in milliseconds (default is 1000).

Digital counter — custom speed

<div data-anim-watcher class="stats">
	<div data-anim-digcounter data-anim-digcounter-speed="500" class="stats__item">1500</div>
	<div data-anim-digcounter data-anim-digcounter-speed="200" class="stats__item">500</div>
	<div data-anim-digcounter data-anim-digcounter-speed="1700" class="stats__item">800</div>
</div>

Number formatting

The component can format numbers by separating thousands. Add data-anim-digcounter-format to enable formatting. Optionally, specify a separator symbol (default is a space).

Digital counter — formatting

<div data-anim-watcher class="stats">
	<div data-anim-digcounter data-anim-digcounter-format="." class="stats__item">1500</div>
	<div data-anim-digcounter data-anim-digcounter-format class="stats__item">500</div>
	<div data-anim-digcounter data-anim-digcounter-format="," class="stats__item">800</div>
</div>
Note
The formatting affects only the visual output. Internally, the counter still operates on numeric values.

Download

Use animated counters to highlight key numbers and metrics. Download the template and speed up your UI development.

Download Animmaster Vite Template Save your time — start now