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
transformto 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
Here’s a visual example, step by step:
Using the FLIP technique you can easily create a smooth shared element transition:
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();