Drain Js

Makes smooth transitions between two numbers.

Want a Svelte site built?

A callback based utility for making fluent number changes.

npm install drain-js

yarn add drain-js

import drain from 'drain-js';

drain({ start: 3000, end: 2750, onInterval: console.log });

// Output
2906
2812
2803
...
2752
2751
2750

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.

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