Advanced Usage

FlippyJS also exposes the class FLIPElement, which is used internally to represent elements in animations. Should you wish finer control over your animation, this class can be used.

The FLIPElement constructor takes two parameters:

1. {HTMLElement} element - the element to animate
2. {Object} [options] - an options object, see Usage for details

The resulting instance has the following methods, most of which should be self-explanatory if you have read the blog post where flip originated.

All these methods returns the instance itself, so they can be chained.

Method	Description
.first()	Call when we should record the first position
.last()	Call when we should record the last position
.invert()	Call when we should move the element back to the first position
.play()	Call when we should animate the element to the last position
.stop()	Stops a currently playing animation, instantly moving to the last position

Example

const elm = document.getElementById("flip-elm");
const $elm = new flip.FLIPElement(elm);

$elm.first();
elm.style.left = "50px";
$elm.last()
    .invert()
    .play();