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 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:

  start: 100, 
  end: 1000, 

3. Implement a function on each tag.

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

4. Implementation of the function after the animation.

  start: 100, 
  end: 1000, 
  onComplete: function(){
    // do something
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

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.

Related Posts


CSS Layout Components Horizontal/Vertical Stack | HStack and VStack

HStack and VStack in CSS – CSS layout components that (basically) stack anything horizontally and vertically. A pure CSS library that makes it easy to stack elements…


How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…


Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…


Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…


Bootstrap 4 Sidebar Menu Responsive Template | MDB

Bootstrap Side Navbar – Responsive sidebar template based on the Bootstrap 4 framework. An easy-to-use, totally responsive, Google Material Design impressed aspect navigation for modern web app…


Lightweight Bootstrap 4 Toast Notification Plugin | BS4 Advanced Toast

A lightweight Bootstrap 4 Toast Notification plugin integrated with JS/jQuery. bs4-toast.js is a JavaScript library that enhances the native Bootstrap toast component with icons, buttons, callbacks, and…

Leave a Reply

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