smoove-js
v0.1.1
Published
FLIP animation helper library
Downloads
11
Readme
Smoove JS
A small helper library for FLIP animations
What the FLIP?
The FLIP approach to animation, coined by Paul Lewis, translates transitions of expensive style-properties (width
, height
, top
, left
, etc.) to more performant transitions using transforms. For an explanation as to why these pixel-based transitions often result in UI jank, I highly recommend this article that goes into some detail about this.
Install
$ npm i smoove-js
Getting started
To get started, I recommend having a look at an example implementation, such as in demo/main.js
. The first thing you will want to do when transitioning an element with Smoove is to initialize an animation, passing the DOM-element you wish to transition.
import smoove from 'smoove-js'
const myEl = document.getElementById('el')
const myAnim = smoove.init(myEl)
Now, to transition the element, simply call the animate method on myAnim
and pass a callback that applies the element's style change(s).
myAnim.animate(() => (myEl.style.left = '100px'))
If you wish to transition to a new element, you can pass this element as the animation option to
.
myAnim.animate(showBiggerEl, {to: myBiggerEl})
API
smoove.init(el) => <AnimObj>
Initializes a new animation.
Props
| Name | Type | Required | Description | | ---- | ----------- | :------: | ------------------ | | el | HTMLElement | ✅ | Target DOM element |
<AnimObj>.measure() => <AnimObj>
Measures the current position of target element.
<AnimObj>.animate(stylingFn, animationOpts) => <AnimObj>
Animates target element from bounds (based on previous measure or init) to bounds after callback.
Props
| Name | Type | Required | Description | | ------------- | ------- | :------: | --------------------------------------------------------------------------------- | | stylingFn | funtion | ✅ | Function that performs style changes | | animationOpts | obj | ❌ | Object describing transition (see docs) |
Contributing
This project is open to and encourages contributions! Feel free to discuss any bug fixes/features in the issues. If you wish to work on this project:
- Fork this project
- Create a branch (
git checkout -b new-branch
) - Commit your changes (
git commit -am 'add new feature'
) - Push to the branch (
git push origin new-branch
) - Submit a pull request!