Skip to content
This repository has been archived by the owner. It is now read-only.
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.

About

A helper library for doing FLIP animations.

Resources

License

Releases

No releases published

Packages

No packages published