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 |