Create Smooth Animations With Native JavaScript – between.js

Category: Animation , Javascript , Recommended | August 3, 2018
Author: sasha240100
Views Total: 791
Official Page: Go to website
Last Update: August 3, 2018
License: MIT


Create Smooth Animations With Native JavaScript – between.js


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

How to use it:


$ 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) => {
    .on('start', (value) => {
    .on('complete', (value) => {

You Might Be Interested In:

Leave a Reply