A helper library for doing FLIP animations.
JavaScript
Latest commit a084777 Jan 21, 2016 @paullewis paullewis Adds .eslintrc
Permalink
Failed to load latest commit information.
dist Fixes error message. Jan 14, 2016
src Fixes error message. Jan 14, 2016
.eslintrc Adds .eslintrc Jan 21, 2016
.gitignore First commit. Jan 13, 2016
CONTRIBUTING.md First commit. Jan 13, 2016
LICENSE First commit. Jan 13, 2016
README.md Updates README Jan 13, 2016
gulpfile.js First commit. Jan 13, 2016
package.json Fixes error message. Jan 14, 2016

README.md

FLIP.js

A helper library for FLIP animations.

FLIP Demos

FLIP is an approach to animations that remaps animating expensive properties, like width, height, left and top to significantly cheaper changes using transforms. It does this by taking two snapshots, one of the element's First position (F), another of its Last position (L). It then uses a transform to Invert (I) the element's changes, such that the element appears to still be in the First position. Lastly it Plays (P) the animation forward by removing the transformations applied in the Invert step.

Usage

You can use the FLIP helper on its own, like this:

let flip = new FLIP({
  element: target,
  duration: 2000
});

// First position & opacity.
flip.first();

// Apply the 'end' class and snapshot the last position & opacity.
flip.last('end');

// Move and fade the element back to the original position.
flip.invert();

// Play it forwards.
flip.play();

Using GSAP.

If you've already got GSAP in place, you may wish for it to handle playback. In which case, you can declare that in the config object:

let flip = new FLIP({
  element: target,
  duration: 2000,
  play: 'GSAP'
});

Specifying timing functions

You can either specify your own function, or, if you're using GSAP, you can use its easing functions:

// Declare an easing function directly.
let flip = new FLIP({
  element: target,
  easing: function (t) {
    return t * t;
  }
});

// ... or declare an easing function from GSAP.
let flip = new FLIP({
  element: target,
  easing: Bounce.easeOut
});

Documentation & Demos

New to FLIP?

For more background info take a look at the FLIP intro post.

License: Apache 2.0 - See /LICENSE.

Author: paullewis.

Please note: this is not an official Google product.