JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Between.js

    Lightweight JavaScript (ES6) tweening engine
    Filed under 

    • 🔾38%Overall
    • 678
    • 4.3 days
    • 🕩18
    • 👥6

    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 :snowflake: JS Tweening library.

      The library is only 9.08 Kb (3Kb gzip)

    • Performant :zap: JS Tweening library.

      It uses optimization patterns to speed up & smooth animation.

    • Modern :gem: 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);
      });
    
    Show All