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.