isabella232 / countup

Easily animate numbers

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.