Press "Enter" to skip to content

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 Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *