Lightweight Tweening & Animation Library For JavaScript – Liike.js

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),
});