Lightweight Tweening & Animation Library For JavaScript – Liike.js

Category: Javascript , Recommended | September 18, 2017
Author: LiikeJS
Views Total: 272
Official Page: Go to website
Last Update: September 18, 2017
License: MIT

Preview:

Lightweight Tweening & Animation Library For JavaScript – Liike.js

Description:

Liike.js is a super small yet highly customizable tweening & animation library for JavaScript.

Basic usage:

Install the Liike.js and import it into your project.

$ npm install liike--save

import liike from 'liike';

Or include the UMD version on the html page as this:

<script src="liike.min.js"></script>

Create a new tween object and specify the target DOM element.

tween(element, {
  // options here
});

All possible options to customize the liike.

tween(element, {

  // delay
  delay: 0,

  // duration
  duration: 1000,

  /*
    linear
    quadIn, quadOut, quadInOut (power to 2)
    cubicIn, cubicOut, cubicInOut (power to 3)
    quartIn, quartOut, quartInOut (power to 4)
    quintIn, quintOut, quintInOut (power to 5)
    sineIn, sineOut, sineInOut
    bounce
  */
  easing: 'bounce',

  // values to start from
  from: {
    y: -100,
    opacity: 0
  },

  // values to tween to
  to: {
    opacity: 1
  }
  
});

Callback function.

tween(element, {

  // on start 
  onstart: onstart(target),

  // on progress
  onprogress:  onprogress(target, t),

  // on end
  onend: onend(target),

});