Animating the impossible with the FLIP technique

You ever been asked by a client to build an animation for a website that you felt it's almost impossible to implement?

And no, I'm not talking about super fancy animations that follow some timeline and need to be orchestrated. I'm talking about animations that seem simple on the surface, but when you start implementing them, you get stuck for hours scratching your head... 🤦‍♂️

For example, imaging you have a list of removable cards, and when a card is removed, you want the other cards to transition to their new places instead of "snapping" there immediately.

Or imagine you have a grid of images (Masonry grid style), and when you click on one, you want it to transition from its place in the grid to a fixed place on the screen like it is an open dialog and return to its place in the grid when closed.

So how would you implement that?? (take a minute to think about it) .
.
.
.
Done??

What is tricky thing about these kind of animations is that the animated elements are affecting the layout of the page. And the different animation states might be in different types of positioning (a static positioned element is becoming a fixed positioned element in the case of the masonry grid example).

And animating stuff that affects/affected-by the layout is performance heavy, and can be VERY hard.

so what is the solution?? 🤔

FLIP comes to the rescue!!

FLIP is a technique named as an acronym for the 4 steps that you use: 1- First: Store the initial measurements of the element that you want to animate (measurements = position/scale/rotation)

2- Last: Do the layout shift that you want to do immediately (eg. remove the element from the list and let the rest of the cards snap to their new positions) And then store the final measurements of the element.

3- Inverse: 🔁 Now here comes the most important part!! Calculate the difference between the initial and final measurements (eg last.x - first.x) which represents the delta transformation. Then add it inversed to the final element. This way, although the element should now be in its new place, but because we applied the negative delta to it, it appears as though it didn't move from its initial position.

4- Play: All that remains is to animate removing this delta value, and watch the magic happening!!!

Using this awesome technique, many impossible animations suddenly became possible!!!

And the good thing is, there is many libraries out there that handles all this calculations for you like Flipping.js, making it very easy for anybody to use!!

What are your thoughts about this technique?? And do you have a different technique that you would recommend it to your fellow developers??

Hope you learned something from this guys. Until next time 👋