Increment / Decrement Numeric Values – drain.js

Category: Animation , Javascript | November 16, 2021
Author:aykutkardas
Views Total:379 views
Official Page:Go to website
Last Update:November 16, 2021
License:MIT

Preview:

Increment / Decrement Numeric Values – drain.js

Description:

drain.js is a tiny JavaScript library for animating numbers from a number to a new one.

How to use 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 the drain.js and specify the start/end values as follows:

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

3. Execute a function on each tick.

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

4. Execute a function after the animation has ended.

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

You Might Be Interested In:


Leave a Reply