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
Install
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)
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
- IE 10 and newer (IE 9 and older will need polyfill for
requestAnimationFrame)
