drain-js is a callback-based tool for making fluent number counter animation changes in numbers.
number counter animation javascript, number counter animation codepen, jquery number counter animation on scroll codepen, css number counter animation
How to make use of it:
1. Install and import the Drain.js library.
# NPM $ npm i drain-js
import drain from 'drain-js';
// or import drain from "https://cdn.skypack.dev/drain-js";
2. Create a new instance of Drain.js and specify start/end values as follows:
drain({
start: 100,
end: 1000,
});3. Implement a function on each tag.
drain({
start: 100,
end: 1000,
onInterval: function(val){
// do something
}
});4. Implementation of the function after the animation.
drain({
start: 100,
end: 1000,
onComplete: function(){
// do something
}
});| Name | Default | Description |
|---|---|---|
| speed | 100 | An animation can be completed in about 10 to 20 steps. The speed (ms) value is the time set for each step. |
| start | undefined | The value at which the animation will start |
| end | undefined | The value at which the animation will end. |
| onInterval | undefined | The function that will run at each step until the animation is complete. |
| onComplete | undefined | The function to run when the animation is complete. |
Demo List
| Name | Status | Type | URL |
|---|---|---|---|
| Demo Simple | ✔️ | Number Transition | Link |
| Demo | ✔️ | CSS Animation & Number Transition | Link |
| Demo with React | ✔️ | CSS Animation & Number Transition | Link |
| Demo with Vue | ✔️ | CSS Animation & Number Transition | Link |
| Demo with Svelte | ✔️ | CSS Animation & Number Transition | Link |
Increment / Decrement Numeric Values, drain-js Plugin/Github, number counter animation css, number counter in javascript, js counter animation codepen
See Demo And Download
Official Website(aykutkardas): Click Here
This superior jQuery/javascript plugin is developed by aykutkardas. For extra Advanced usage, please go to the official website.
