Animated number counter web component

This library allows developers to easily create an animated number counter. (Demo)

How to install

Install using npm or yarn

npm install --save @smartimpact-it/number-counter

How to use

<number-counter duration="3000">1500</number-counter>

If you want the number to be formatted as a number in the current language of the document, use the formatted attribute:

<number-counter duration="3000" formatted>1500</number-counter>

If you want the animation to be paused whenever the element is hidden from the viewport, use the pause-when-invisible attribute:

<number-counter duration="3000" pause-when-invisible>1500</number-counter>

Available options

| Attribute | Default value | Description | | ---------------------- | -------------- | ----------------------------------------------------------------------- | | initial | 0 | the initial number to start from | | final | the text value | the final number | | formatted | | whether to format the text (Intl.NumberFormat) | | custom-format | | a custom format to be used (use '#' for the digits. E.g. ### ### ###) | | duration | 3000 | the duration of the animation | | step | 32 | the interval between each increase (milliseconds). | | pause-when-invisible | false | whether to pause when out of view | | root-margin | 0px | the root margins for the IntersectionObserver. |

The custom format is also automatically "read" from the content if you do not provide the "final" attribute. For example, for the component below the custom format will be inferred to be # ### ###.

<number-counter>1 230 502</number-counter>

Available methods

The elements also have some useful methods:

| Method | Description | | --------- | ---------------------------------------- | | pause | Pause the animation. | | play | Resume the animation. | | rewind | Set the value back to the initial value. | | restart | Restart the animation. |