In this video we'll animate multiple elements into new positions that we choose. Our animation library of choice is react-spring.
Our first step is lay out the final layout. Then we hide it, and animate the initial layout ontop.
What we are trying to achieve is described here:
https://css-tricks.com/animating-layo...
The helper functions I create is not created using any mathematical formula, just some functions I created on the spot. Any reference to actual math theory that explains how X and Y are calculated when translating points are welcome :)