Lightweight Tweening & Animation Library For JavaScript – Liike.js

Category: Javascript , Recommended | September 18, 2017
Views Total:524 views
Official Page:Go to website
Last Update:September 18, 2017


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

You Might Be Interested In:

Leave a Reply