Implement FLIP transitions easily with flipping

Back in 2015 Paul Lewis published a brilliant article named FLIP your animations, a technique to getting smooth animations on the web.

FLIP stands for First, Last, Invert, Play

  • First: before anything happens, record the current (i.e., first) position and dimensions of the element that will transition. You can use element.getBoundingClientRect() for this, as will be shown below.
  • Last: execute the code that causes the transition to instantaneously happen, and record the final (i.e., last) position and dimensions of the element.*
  • Invert: since the element is in the last position, we want to create the illusion that it’s in the first position, by using transform to modify its position and dimensions. This takes a little math, but it’s not too difficult.
  • Play: with the element inverted (and pretending to be in the first position), we can move it back to its last position by setting its transform to none.

Here’s a visual example, step by step:

See the Pen How the FLIP technique works by David Khourshid (@davidkpiano) on CodePen.

Using the FLIP technique you can easily create a smooth shared element transition:

flipping is a JavaScript library that helps you easily set up these FLIP animations.

import Flipping from 'flipping/adapters/web';

const flipping = new Flipping();

// First: let Flipping read all initial bounds
flipping.read();

// execute the change that causes any elements to change bounds
doSomething();

// Last, Invert, Play: the flip() method does it all
flipping.flip();

flipping (GitHub) →
Animating Layouts with the FLIP Technique →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Join the Conversation

1 Comment

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.