-
Notifications
You must be signed in to change notification settings - Fork 3
Advanced Usage
Johan Fagerberg edited this page Aug 5, 2018
·
3 revisions
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:
-
{HTMLElement} element
- the element to animate -
{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 |
const elm = document.getElementById("flip-elm");
const $elm = new flip.FLIPElement(elm);
$elm.first();
elm.style.left = "50px";
$elm.last()
.invert()
.play();
Importing • Usage • Advanced Usage • Gotchas