josephjlee/flippy.js

FLIP animation helper; animate DOM changes with ease

FlippyJS

FlippyJS is a helper library for FLIP animations - it allows you to easily animate any changes you make to the DOM, without having to specify the animation manually. All animations are done using CSS animations.

It is exported as a UMD library, supporting both AMD, CommonJS and basic <script> usage.

Usage

Flippy.js exposes the function 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:

const 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() { /* ... */ }

Advanced usage

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.