FLIP animation helper; animate DOM changes with ease
npm install flippy.jsIt is exported as a UMD library, supporting both AMD, CommonJS and basic usage.
flip(elements, modifier, [options]). Pass it the elements you want to animate, a function which should modify the DOM when called, and an optional options object. It returns a Promise which resolves when the animation is finished.For specifics, see our docs.
Here's a quick example:
``javascript
let container = document.querySelector(".notification-container");
flip(
".notification", // the elements to animate
()=>{ // called when we should make the DOM change
container.insertBefore(
generateNotification(),
container.firstChild
);
}
).then(()=>{
console.log("Animation finished");
});
function generateNotification() { / ... / }
`
Internally, FlippyJS uses a FLIPElement class to represent elements that are being animated. This class is exposed as flip.FLIPElement`, should you wish to play around with it.
More details at our docs.