NumberCounter

The NumberCounter plugin provides numerical interpolation animation. It handles numeric formatting including comma injection, decimal precision, and symbol appending via prefix and suffix properties.

---

Prefix & Decimals Configuration

The prefix property prepends a string to the output value. The decimals property locks the floating-point precision of the interpolated value.

Total Revenue

$0.00

60 FPS

---

Integer Formatting (decimals: 0)

Setting decimals: 0 rounds the interpolated value to the nearest integer. The useCommas: true property injects standard thousand separators.

Active Users

0

60 FPS

---

Suffix Configuration

The suffix property appends a string to the output value.

Growth

85.4%

60 FPS

---

Explicit Bounds Configuration (from & to)

The count configuration object supports explicit from and to properties to define absolute interpolation boundaries. This bypasses DOM state extraction and provides direct support for animating generic JavaScript objects.

When the from property is defined but the to (or value) property is omitted, the engine dynamically calculates the destination (to) value by parsing the target node's current state.

DOM Target

100

Obj State

Score: 150

60 FPS

---

Timeline & Callback Integration

The NumberCounter plugin supports standard AnimX core utilities, including timeline() sequencing and standard lifecycle callbacks.

• Timelines: The count property interpolates natively within timeline() sequences alongside standard CSS property tweens.
• onUpdate: The onUpdate lifecycle callback executes per-frame during the animation, exposing a normalized progress value (0.0 to 1.0) to support dynamic logic execution.

Loading Core

0%

60 FPS

---

Core Playback Controls (yoyo, repeat, etc.)

Because text effects are processed natively within the AnimX core engine, they automatically inherit 100% of standard tween properties (repeat, yoyo, delay) and playback controls (play(), pause(), reverse(), seek()).

Upload Progress

0%

60 FPS

---

How to use NumberCounter

If the starting value is omitted, AnimX parses the initial textContent of the target node, stripping non-numeric characters to establish the baseline integer.

import { animate } from 'animx';

animate('.revenue-label', {
  duration: 2,
  count: {
    value: 1000000,
    prefix: "$",           // Puts a dollar sign before the number
    suffix: "%",           // Puts a percent sign after the number
    decimals: 2,           // Keeps exactly 2 decimal places (e.g. .00)
    useCommas: true        // Adds commas (e.g. 1,000,000)
  }
});

---

Properties

Property	Default	Description
value	`0`	Required. The final number you want to animate to.
decimals	`0`	The number of decimal places to show.
prefix	`""`	Text to add directly in front of the number (like a currency symbol).
suffix	`""`	Text to add directly after the number (like a percentage symbol).
useCommas	`true`	If true, adds standard commas to the number (`1,000,000`).