Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/LiikeJS/Liike
Tiny JS tweening library.
https://github.com/LiikeJS/Liike
Last synced: 3 months ago
JSON representation
Tiny JS tweening library.
- Host: GitHub
- URL: https://github.com/LiikeJS/Liike
- Owner: LiikeJS
- License: mit
- Created: 2017-09-13T21:29:16.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2017-09-23T22:04:30.000Z (about 7 years ago)
- Last Synced: 2024-05-02T02:23:21.873Z (7 months ago)
- Language: JavaScript
- Homepage: https://liike.js.org
- Size: 655 KB
- Stars: 180
- Watchers: 5
- Forks: 19
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/Flet/semistandard)
[](https://www.npmjs.com/package/liike)
[](https://github.com/liike/liike/blob/master/LICENSE)
[](https://gitter.im/LiikeJS/Liike?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
[](https://twitter.com/pakastin)
[](https://twitter.com/LiikeJS)
# 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`](https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp) (provided by [`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/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
- [Source](https://github.com/pakastin/Liike/blob/master/example/index.js)
# 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
```js
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](#available-easings)
- 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`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame))
# License
- [MIT](https://github.com/pakastin/Liike/blob/master/LICENSE)