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

Finish Event

oas-finish callback

Example

API

Attributes

Attribute	Description	Type	Default
duration	Animation duration (ms); 0 jumps straight to the target	number | 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 }

• 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.