The Secrets of Framer's Magic Motion
Hello!
I have two new updates to share today - Not a Number got a major design revamp, and I published a new post!
By far my favourite part about Framer Motion is its magical layout API - pass in the layout prop to any motion component and watch as it animates seamlessly between positions on the page:
A while ago I took some time to remake this from scratch to figure out just exactly how it worked. It turns out it uses a technique called FLIP, and in this new post, we go over exactly what it is and how you might implement it in React.
Check it out here: https://www.nan.fyi/magic-motion
I also wrote a brief summary over on Twitter, if that's more of your thing: https://twitter.com/nandafyi/status/1592295412148637696
Hope you enjoy it! As always, let me know what you think.
Cheers, Nanda