Tiny JS tweening library.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs
example
src
.gitignore
LICENSE
README.md
package-lock.json
package.json
rollup.config.js
rollup.dev.config.js
watch.js Add ES6 module dev build Sep 16, 2017

README.md

js-semistandard-style npm npm Join the chat at https://gitter.im/pakastin/liike Twitter Follow Twitter Follow

Logo

Liike

Liike is a Finnish word and means movement, motion. It's a minimalistic library to create performant custom JS tweens no matter what you're tweening.

When you create a tween, Liike will create a single render loop on-demand for every tweens running and use DOMHighResTimeStamp (provided by requestAnimationFrame), which should be accurate to 5 µs. If the delay is 0, Liike will start the tween at the next animation frame and count the duration from there.

Example

https://liike.js.org

Install

npm i liike

Usage

import liike from 'liike';

/**
 * Define how Liike should animate based on the tweened values
 * @param {Element} The element you're tweening
 * @param {Object} Tween settings
 */
const transform = (target, data) => {
  const { x = 0, y = 0, opacity = 1 } = data;

  target.style.transform = `translate(${x}px, ${y}px)`;
  target.style.opacity = opacity;
};

const tween = liike(transform);

const $hello = document.getElementById('hello');

tween($hello, {
  delay: 0,
  duration: 1000,
  easing: 'bounceOut',
  from: {
    y: -100,
    opacity: 0
  },
  to: {
    opacity: 1
  }
});

Tween settings

  • delay: After how many milliseconds the tween will start
  • duration: How many milliseconds the tween will last
  • easing: Check available easing functions below
  • from: Values to start from
  • to: Values to tween to
  • onstart: Callback for tween start onstart(target)
  • onprogress: Callback for progress onprogress(target, t)
  • onend: Callback for tween end onend(target)

Available easings

  • 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
  • bounceIn, bounceOut, bounceInOut

Browser support

License