Usage

The basic usage of FlippyJS is through the flip(...) function. This function takes three parameters:

1. {String|HTMLElement|Array<HTMLElement>} elements - The elements to animate
2. {Function} modifier - The function to call when the DOM should change
3. {Object} [options] - an optional options object (see #options)

If elements is a String, it will be passed to document.querySelectorAll to get a list of elements.

All elements will be given the animatingClass when they are animated, and the scalingClass if their size changes - this is useful to avoid having your content look stretched (for example, our demos hide the text content of modules when the scalingClass is applied).

The function returns a Promise which resolves once the animation is finished. If you would rather use a callback, set options.callback.

Options

The following options are available:

{
  duration: 400, // the length of the animation in milliseconds
  ease: "ease", // the CSS timing function used for the animation
  animatingClass: "flip-animating", // a class added to elements when they are animated
  scalingClass: "flip-scaling" // a class added to elements when they are scaled
  callback: null // a function to call when the animation is finished
}

No options are required, and will simply fall back to the defaults if not given.

Example

const container = document.getElementsById("container");
flip(
  Array.from(container.children),
  ()=>{
    container.toggleClass("toggled");
  }
);