googlearchive / flipjs

A helper library for doing FLIP animations.

FLIP.js

A helper library for FLIP animations.

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

• Demos - There are more to make :)
• API docs.

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.

flipjs's Issues

Fails if flipped element has css transforms.

Hi,
The main issue with this lib atm is that it breaks if you specify css transforms on your element.

TL;DR

See this fiddle for an example of the failure.
See this fiddle for a fix working with the new CSS player.
See this requirebin for a fix working with the rAF player.

Why does it break ?

For two reasons:

1. The FLIP.invert() method overwrites the transforms of the element by setting this.element_.style.transform
2. The diff calculations use element.getBoundingClientRect(), which returns the transformed bounding box of the element.

How do we fix this ?

To fix this, we have to:

• Store the transforms of the element in FLIP.first() and FLIP.last()

// in Flip.first()
this.first_.transform = getComputedStyle(this.element_).transform;
// in Flip.last()
this.last_.transform = getComputedStyle(this.element_).transform;

• Apply the original element's transform after our inversion transforms:

// in FLIP.invert() method
const transform = this.first_.transform === 'none' ? '' : this.first_.transform;
this.element_.style.transform = `
  translate(${this.invert_.x}px, ${this.invert_.y}
  scale(${this.invert_.sx}, ${this.invert_.sy})
  ${transform}
`;

• Use element.offset{Top,Left,Width,Height} to compute our diffs, since we have to use the element's untransformed bounding box for this to work. (And of course we can keep using the gBCR fast path if we detect no transforms on the element).

See this fiddle for a working example.

What does it imply ?

It implies that the players be able to interpolate the raw transform matrix returned by getComputedStyle(this.element_).transform.
For the CSS player, no prob, that's what CSS transitions do !
For the rAF player, some math are needed. Fortunately, there's an npm module for that !
See this requirebin for a fix working with the rAF player.

So a redesign might be needed regarding the different players, like maybe keep only CSS in core, and move rAF, GSAP (and others ?) to external modules, to keep the lib small by default.
Or maybe something like a FLIP.interpolate_(alpha) method that would be able to return the interpolated matrix for the players to consume...

What do you think ?

PS: I vote keep it small !

Why is this project in googlearchive?

Has it been superceded by another library? Is FLIP itself outdated?

Support for Shared Element Transitions

Currently, flipjs supports implementing the FLIP technique for a single element that changes position due to a class change. However, a common use-case (similar to Android's Shared Element Activity Transitions) is that:

• The final node is nearly equivalent to the initial node, save for differences in position/size.
• The final node is not the same node as the initial node.

One strategy I've been using is [data-flip="foo"] on both the initial and final nodes, so that I can:

• getBoundingClientRect() on the initial (currently visible) node
• execute the code that removes the initial node and displays the final node
• getBoundingClientRect() on the final (now visible) node
• execute FLIP.

Perhaps we can supply an argument to last(...) that allows us to specify the new shared node?

GSAP Support

The GSAP play option is nice, but a little lacking.

It would be helpful if flip.play() would return the TweenLite/TweenMax instance it creates when using the play: 'GSAP' option. Alternatively, the tween could be created & returned through another method ( flip.tween(), flip.gsap() ? ). Either of these would allow you to queue up multiple FLIP animations on a GSAP timeline, or control them manually with GSAP's methods.

Another helpful feature would be to pass along options to the TweenLite/TweenMax setup. Perhaps as an argument in the play method.

var flip = new FLIP({
  element: target,
  duration: 2000,
  play: 'GSAP'
});
flip.first();
flip.last('end');
flip.invert();
flip.play(null, {
  easing: "Power4.easeInOut",
  onComplete: function(){ console.log('animation complete!'); }
});

Support for NPM

Hi, is there any plan to make this package available to be downloaded via NPM?

Write some tests.

Because that's what good citizens do, Paul.

Chaining multiple FLIPs on element

I'm really enjoying working with FLIP! Thanks for the write-ups and demos.

Wondering what the most effective way of chaining animations to fire on an element sequentially would be. Request for complete callback would get us part of the way there, but wondering if there's something else at an API level that could be explored? Would love to hear your thoughts.

Cheers

Callback functions

The ability to have a complete callback when the animation is done would be quite handy. start could also be useful.

var flip = new FLIP({
  element: target,
  easing: function (t) {
    return t * t;
  },
  start: function(){ console.log('animating is starting'); },
  complete: function(){ console.log('animation is done!'); }
});

Allow users to abort animations.

Non-Minified /dist/ file

I've submitted a simple pull request that helps FLIP be used in module loaders, but Webpack presents this error due to the file being minified.

It looks like if you custom build it with isProd set to false, it won't be minified, but that's not a great option for those who'd like to drop it into a project and use it right away.

A flip.js and flip.min.js in the /dist/ dir would be fantastic!

Dispatch only one flipcomplete event for groups

Now, every element of a group will dispatch its own flipcomplete. Would be nice to only dispatch one so we can chain with other events/animations.

Submit to NPM

Took me a while to figure out you can install FLIP via npm install GoogleChrome/flipjs (the GitHub username & repo name), and I spent way too long searching NPM for the "correct" FLIP.

Would you please submit FLIP to NPM to make it easier to load into projects, or at least list the proper install step?

Thanks!

The demo url does not work 😭

As the title says. The demo url does not work: https://googlechrome.github.io/flipjs/ 😭