Animating Layouts with the FLIP Technique for jank free layout transitions.

Animating Layouts with the FLIP Technique for jank free layout transitions.

FLIP is a mnemonic device and technique which 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 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.

https://css-tricks.com/animating-layouts-with-the-flip-technique/