2.0.0 • Published 6 years ago
@firstandthird/countup v2.0.0
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.