Create Smooth Animations With Native JavaScript – between.js

Preview:

Description:

between.js is a lightweight JavaScript tweening engine for creating smooth, performant animations.

How to use it:

Installation.

# NPM
$ npm install between.js --save

Import the Between.

import Between from 'between.js';

Or directly include the UMD version on the webpage.

<script src="/path/to/between.js"></script>

Create a new Between instance and specify the from/to values as numbers, arrays or objects.

new Between(1, 100)
new Between([1, 5], [10, 10])
new Between(({x: 1, y: 2, z: 3}, {x: 4, y: 5, z: 6})

Set the duration in milliseconds.

new Between(1, 100).time(duration)

Disable/enable looping.

// mode: 'repeat'
// repeatTimes: false = no limit 
new Between(1, 100).loop(mode, repeatTimes)

Apply an easing function to the animation.

new Between(1, 100).easing(easing)

Event handlers.

new Between(1, 100)
    .on('update', (value) => {
      console.log(value); 
    })
    .on('start', (value) => {
      console.log(value);
    })
    .on('complete', (value) => {
      console.log(value);
    });