drain-js
drain-js copied to clipboard
Published
20 hours ago •
aykutkardas
aykutkardas
Makes smooth transitions between two numbers.
drain-js
A callback based utility for making fluent number changes.
Install
npm install drain-js
yarn add drain-js
Usage
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 |
aykutkardas