NumberAnimation

An animation component that eases a number from its current value to the target value, stops at the target and emits oas-finish; under prefers-reduced-motion it jumps straight to the target, and disconnecting cancels the rAF without leaks.

Basic Usage

Default 1500ms roll from 0 to target

Example

Speed and Decimal Places

duration=3000 + to-fixed=2

Example

Start Value (from)

from sets the start value of each new round (default 0). Changing value mid-animation still continues from the currently displayed value — from does not affect continuation.

from=500 start

Example

Controlled Playback (active + play())

active controls playback: plays by default; "false" freezes the frame, changing back to "true" continues from the current value to the target. play() manually replays a round (starting from from; re-entrant safe while playing) — replay with the same value works for data refreshes without mutating value. To animate only when scrolled into view, feed active from an IntersectionObserver. The second example in the block statically shows the active="false" frozen state (held at the start value 6666).

active pause/resume + play() replay

PauseReplay

Example

Easing

easing is a five-level enum: ease-out (default, fast then slow) / linear (constant speed, e.g. download bytes) / ease-in / ease-in-out / spring (mild overshoot bounce); invalid values fall back to ease-out.

easing five levels compared

Example

Thousands Separator

group-separator="true" formats the animated value with locale-aware thousands separators (Intl.NumberFormat, aware of config-provider / setLocale; the formatter is cached per locale|decimals — zero per-frame construction cost).

group-separator thousands

Example

Finish Event

oas-finish callback

Example

Font Size

Font size is fixed at --oas-font-size-lg (16px) by default and does not follow the outer context; override with the CSS variable --oas-number-animation-font (e.g. 32px).

API

oas-number-animation

Attributes

Attribute	Description	Type	Default
active	Controlled playback: plays by default; "false" freezes the frame, changing back to "true" continues from the current value to the target	string	—
duration	Animation duration (ms); 0 jumps straight to the target	number | string	—
easing	Easing: ease-out (default) / linear / ease-in / ease-in-out / spring (mild overshoot); invalid values fall back to ease-out	string	ease-out
from	Start value (default 0); applies at each new round start, continuation unaffected	string	0
group-separator	Thousands grouping ("true" enables, Intl locale-aware; disabled by default)	string	—
to-fixed	Decimal places (Number.prototype.toFixed); when omitted, integer display	string	—
value	Target value; invalid values treated as 0	string	0

Events

Event	Description
oas-finish	Emitted once when the animation reaches the target, detail { value: target value }

CSS Variables

CSS Variable	Default
--oas-number-animation-font	var(--oas-font-size-lg)

• Changing value mid-animation continues from the currently displayed value to the new target.
• When the system enables "reduce motion", the animation is skipped and the target value is shown directly (oas-finish is still emitted).
• On disconnect, any unfinished rAF is cancelled — no leaks.