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 →