/drain-js

Makes smooth transitions between two numbers.

Primary LanguageTypeScriptMIT LicenseMIT

drain-js

npm License

Preview

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

Preview

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