drain-js
A callback based utility for making fluent number changes.
Install
npm install drain-jsyarn add drain-jsUsage
import drain from 'drain-js';
drain({ start: 3000, end: 2750, onInterval: console.log });
// Output
2906
2812
2803
...
2752
2751
2750
Parameters
drain({
start: Number,
end: Number,
speed: Number,
onInterval: Function,
onComplete: Function,
});| 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 |