Skip to content

sasha240100/between.js

Repository files navigation

Lightweight JavaScript (ES6) tweening library.

NPM

EXAMPLES

DOCUMENTATION

Purpose

Make tweening usage convenient and powerful. There are certain things that we were following while developed this library, we wanted to make it:

  • Lightweight ❄️ JS Tweening library.

The library is only 9.08 Kb (3Kb gzip)

  • Performant ⚡ JS Tweening library.

It uses optimization patterns to speed up & smooth animation.

  • Modern đź’Ž JS Tweening library

The library is written in ES6, compiled to ES5 for global browsers support and provides ES6 API.

Install

With npm

$ npm install between.js

Or fetch from CDN

<script src="https://rawgit.com/sasha240100/between.js/master/build/between.js"></script>

Basic usage

Module

import Between from 'between.js';

// new Between(from, to).time(duration)
new Between(1, 10).time(1000)
  .on('update', (value) => { // This callback is executed in every frame
      console.log(value);
  });

Or in HTML:

<script src="./path/to/between.js"></script>
<script>
  new Between(1, 10).time(1000)
    .on('update', (value) => {
        console.log(value);
    });
</script>

API

// Constructor
new Between(
 [Number|Object|Array] from, 
 [Number|Object|Array] to
)

// Methods
  .time([Number] duration) // Set duration
  .loop([String] mode, [?Number] repeatTimes) // Set loop mode, if "repeatTimes" is falsy, treats as "endless"
  .easing([Function] easing) // Set easing function
  .on([String] eventName, [Function] callback) // Add event listener
  .pause() // Pauses
  .play() // Resumes

// Getters
  .isPaused // returns true if paused

There is no need to "start" the tween. It is executed immediately once it was created.

Events

import Between from 'between.js';

new Between(1, 10).time(1000)
  .on('update', (value) => {
      console.log(value); 
  })
  .on('start', (value) => {
      console.log(value);
  })
  .on('pause', (value) => {
      console.log(value); 
  })
  .on('play', (value) => {
      console.log(value);
  })
  .on('complete', (value) => {
      console.log(value);
  });

Different values

  • Numbers
  • Arrays
  • Objects

Numbers

import Between from 'between.js';

new Between(1, 10).time(1000)
  .on('update', (value) => {
      console.log(value);
  });

Example

Arrays

import Between from 'between.js';

new Between([1, 5], [10, 10]).time(1000)
  .on('update', (value) => {
      console.log(value);
   });

Example

Objects

import Between from 'between.js';

new Between({x: 2, y: 3, z: 4}, {x: 4, y: 6, z: 10}).time(1000)
  .on('update', (value) => {
      console.log(value);
  });

Example

Looping

Repeat N times

import Between from 'between.js';

new Between(1, 10).time(4000)
  .loop('repeat', N)
  .on('update', (value, {times}) => {
      console.log(value);
      console.log(times);
  });

Example

Repeat endless

import Between from 'between.js';

new Between(1, 10).time(4000)
  .loop('repeat')
  .on('update', (value) => {
      console.log(value);
  });

Example

Bounce N times

import Between from 'between.js';

new Between(1, 10).time(4000)
  .loop('bounce', N)
  .on('update', (value, {times}) => {
      console.log(value);
      console.log(times);
  });

Example

Easing

import Between from 'between.js';
import Easing from 'easing-functions';

// choose easing mode frome easing-functions

new Between(1, 10).time(4000)
  .easing(Between.Easing.Cubic.InOut)
  .on('update', (value) => {
      console.log(value);
  });

Example

easing-functions npm

Color

Color types:

  • HEX
  • HSL
  • RGB
  • Words (red, yellow...)
import Between from 'between.js';
import ColorPlugin from 'between.js/build/dom-color.between.js';

Between._plugins.color = ColorPlugin;

new Between('red', 'rgb(255,40,30)').time(4000)
  .on('update', (value) => {
      console.log(value);
  });

Example

Or in HTML:

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

Mixed examples

import Between from 'between.js';
import Easing from 'easing-functions';
import ColorPlugin from 'between.js/build/dom-color.between.js';

Between._plugins.color = ColorPlugin;

// choose easing mode frome easing-functions

new Between('red', 'rgb(255,40,30)').time(4000)
  .loop('repeat', 3)
  .easing(Between.Easing.Linear)
  .on('update', (value) => {
      console.log(value);
  });
import Between from 'between.js';
import Easing from 'easing-functions';

// choose easing mode frome easing-functions

new Between(1, 10).time(4000)
  .loop('bounce', 3)
  .easing(Between.Easing.Cubic.InOut)
  .on('update', (value) => {
      console.log(value);
  });
import Between from 'between.js';
import Easing from 'easing-functions';

// choose easing mode frome easing-functions

new Between(1, 10).time(4000)
  .loop('repeat', 4)
  .easing(Between.Easing.Elastic.In)
  .on('update', (value) => {
      console.log(value);
  })
  .on('complete', (value) => {
      console.log(value);
  });