September 22, 2022

A Callback-based Utility for Making Fluent Number Changes | drain.js

drain-js is a callback-based tool for making fluent number counter animation changes in numbers.

number counter animation javascript, number counter animation codepen, jquery number counter animation on scroll codepen, css number counter animation

How to make use of it:

1. Install and import the Drain.js library.

# NPM
$ npm i drain-js
import drain from 'drain-js';
// or
import drain from "https://cdn.skypack.dev/drain-js";

2. Create a new instance of Drain.js and specify start/end values as follows:

drain({ 
  start: 100, 
  end: 1000, 
});

3. Implement a function on each tag.

drain({ 
  start: 100, 
  end: 1000, 
  onInterval: function(val){
    // do something
  }
});

4. Implementation of the function after the animation.

drain({ 
  start: 100, 
  end: 1000, 
  onComplete: function(){
    // do something
  }
});
NameDefaultDescription
speed100An animation can be completed in about 10 to 20 steps. The speed (ms) value is the time set for each step.
startundefinedThe value at which the animation will start
endundefinedThe value at which the animation will end.
onIntervalundefinedThe function that will run at each step until the animation is complete.
onCompleteundefinedThe function to run when the animation is complete.

Demo List

NameStatusTypeURL
Demo Simple✔️Number TransitionLink
Demo✔️CSS Animation & Number TransitionLink
Demo with React✔️CSS Animation & Number TransitionLink
Demo with Vue✔️CSS Animation & Number TransitionLink
Demo with Svelte✔️CSS Animation & Number TransitionLink

Increment / Decrement Numeric Values, drain-js Plugin/Github, number counter animation css, number counter in javascript, js counter animation codepen


See Demo And Download

Official Website(aykutkardas): Click Here

This superior jQuery/javascript plugin is developed by aykutkardas. For extra Advanced usage, please go to the official website.

Share

You may also like...

Leave a Reply

Your email address will not be published.