CountUp 
Easily animate numbers.
Installation
npm install --save @firstandthird/countup
Usage
CountUp has two exports. default one is a Domodule library and there's a named export by animateNumber which the Domodule library leverages.
animateNumber
This function takes an object with the following keys:
| Option | Type | Default | Description |
|---|---|---|---|
target |
Number |
N/A | The number you intend to reach by the end of the animation. |
start |
Number |
0 |
The number the animation starts from. |
duration |
Number |
N/A | The amount of ms the animation should take. |
callback |
Function |
Noop Function | Function to be called once the animation finishes. |
interval |
Function |
N/A | Function to be called with every interval. Useful to update the DOM. |
Example
import { animateNumber } from '@firstandthird/countup';
animateNumber({
target: 20,
interval: value => {
someElement.innerHTML = value;
}
});
CountUp module
CountUp has a module that can be used in the DOM and that also plays nice with ScrollTriggers.
| Option | Default | Description |
|---|---|---|
target |
N/A Has to be defined | The number you intend to reach by the end of the animation. |
start |
0 |
The number the animation starts from. |
duration |
N/A | The amount of ms the animation should take. |
template |
'$D' |
Template to be used to format the number. $D will be replaced with the number. You could use $D% to animate a percent for example. |
Example
<div data-module="Countup"
data-module-target="20"
data-module-template="$D%"></div>See examples for more usage examples.