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.
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
; const transform = { const x = 0 y = 0 opacity = 1 } = data; targetstyletransform = `translate(px, px)`; targetstyleopacity = opacity;}; const tween = ; const $hello = document; ;
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
- bounce