aykutkardas / drain-js

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

drain-js's Issues

Time must not be a fixed value in the setTimeout method

Time must not be a fixed value in the setTimeout method. The user should be able to change this value as they wish.