A tiny dependency-free JavaSript library for animating numeric values.
Live Demo: https://bukacekd.github.io/count-up
- easy to use
- rich formatting using Intl.NumberFormat
- possibility to define a custom easing function
- simple configuration and api
Npm
npm install @js4y/count-upCDN
<script src="https://unpkg.com/@js4y/count-up/dist/index.js"></script>Npm
import {CountUp} from '@js4y/count-up';
new CountUp(document.body, {
from: 1,
to: 10
});CDN
<script src="https://unpkg.com/@js4y/count-up/dist/index.js"></script>
<script>
new js4y.components.CountUp(document.body, {
from: 1000,
to: -1000
});
<script>The component offers a set of configuration items. Below is an overview of them.
new CountUp(element: HTMLElement | string, {
begin?: Function,
complete?: Function,
duration?: number,
easing?: Function,
formattter?: Intl.NumberFormat,
from: number,
to: number,
update?: Function
});required: false, type: Function
The callback function is triggered when the animation starts playing.
new CountUp(document.body, {
begin: () => {
console.log('start of animation');
},
});required: false, type: Function
The callback function is triggered when the animation is completed.
new CountUp(document.body, {
complete: () => {
console.log('end of animation');
},
});required: false, type: number
Animation duration in milliseconds.
new CountUp(document.body, {
duration: 1000
});required: false, type: Function
A custom easing function of the animation. The function argument represents the animation progress between 0 (start of animation) and 1 (end of animation).
new CountUp(document.body, {
easing: progress => Math.sin((progress * Math.PI) / 2),
});Tip: Try one of the easing functions from the https://easings.net/.
required: false, type: Intl.NumberFormat
The number formatter. Allows wide formatting of numbers by locale. By default the formatting follows the html language of the page.
new Intl.NumberFormat(document.documentElement.lang, {
maximumFractionDigits: 0,
minimumFractionDigits: 0
});
To set up your own formatter follow the Intl.NumberFormatter documentation.
required: false, type: number
The beginning of the animation range.
new CountUp(document.body, {
from: 10,
});For numbers greater than Number.MAX_SAFE_INTEGER (253 - 1) use BigInt.
required: false, type: number
The end of animation range.
new CountUp(document.body, {
to: 100,
});For numbers greater than Number.MAX_SAFE_INTEGER (253 - 1) use BigInt.
required: false, type: Function
Callback function triggered on every frame as soon as the animation starts playing. The function argument represents the animation progress between 0 (start of animation) and 1 (end of animation).
new CountUp(document.body, {
update: progress => {
console.log('animation progress', progress.toFixed(2));
},
});Creates the component, but without running the animation.
const countUp = CountUp.create(document.body, {
duration: 1000,
from: 1,
to: 10
});To start the animation, use the constructor.
const countUp = new CountUp(document.body, {
duration: 1000,
from: 1,
to: 10
});The method starts playing the animation.
countUp.play();The method pauses the animation.
countUp.pause();The method cancels the animation.
countUp.cancel(); |
 |
 |
 |
 |
|---|---|---|---|---|
| Chrome 24+ | Edge 12+ | Firefox 29+ | Opera 15+ | Safari 10+ |
The project is licensed under MIT license.
- Dialog - A tiny dependency-free JavaSript ES6 library built on a dialog element with minimal configuration.
- Loader - A tiny dependency-free javascript loading spinner component with minimal configuration.
- lockScroll - A set of methods to lock scrolling within an element or an entire page.