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.

In which I disagree with the sage Carl Sagan.

In which I disagree with the sage Carl Sagan.

Anti-intellectualism is neither created nor destroyed.

Old Carl probably wasn’t feeling very optimistic in 1995—after all, he was dead a year later—but in my experience the process “dumbing down” has neither increased nor decreased. It was just as prevalent in the past just as it will be in the future.

Carl would probably hate the present era too even more than the 1990s and yet for all the dumbness, more people today have more access to information than at any point in history. Knowledge is no longer a scarce commodity locked away and no inquiring mind is prevented from learning whatever it is interested in. This is actually a great time for the autodidact and people are sharing skills and learning tools at an accelerating pace.

It’s easy to downplay the changes that have happened over the last thirty years but don’t judge them superficially. Certainly TV and cinema would be the last places to look for signs of this. The internet and supporting technologies have transformed the intellectual background of our global society and we are only just starting to see its implications.

Originally shared by ****

Carl Sagan in 1995