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

Logo

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.

https://liike.js.org

• Source

npm i liike

• ES6 module production: https://liike.js.org/liike.es.min.js (~2.5 KB)
• ES6 module development: https://liike.js.org/liike.es.js (~5 KB)
• UMD production: https://liike.js.org/liike.min.js (~2.5 KB)
• UMD development: https://liike.js.org/liike.js (~5 KB)

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

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

• 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

• IE 10 and newer (IE 9 and older will need polyfill for requestAnimationFrame)

• MIT