Inside Framer's Magic Motion

A guide on recreating framer's magical layout animations.

My favourite part about Framer Motion by far is its magical layout animations—slap on the layout prop to any motion component, and watch as that component seamlessly transitions from one part of the page to the next: < motion.div layout /> Hide types function hello left-paren ( right-paren ) left-curly { console dot . log left-paren ( hello, world! right-paren ) right-curly } When you click on "Hide types", the squares seamlessly move from one position to the next. In this post, I want to dive deep into the techniques that allow these layout animations to happen. Specifically, we'll go over co

saved by

• Chloe Yan
• Aaron Pham
• Andrew Kachnic
• Mohammed Ibrahim

related reading

• On layout choreographykarlkoch.me
• Motion (prev Framer Motion): JavaScript & React animation librarymotion.dev
• animations.devanimations.dev
• An Interactive Guide to CSS Transitions • Josh W. Comeaujoshwcomeau.com
• Not a Numbernan.fyi
• Details That Make Interfaces Feel Betterjakub.kr
• The Web Animation Performance Tier List | Motion Magazinemotion.dev
• Transitionsanimations.dev
• Crafting the Next.js Websiterauno.me
• The Web Animation Performance Tier List | Motion Magazinemotion.dev
• On UI Animations - Shu Dingshud.in
• The physics behind spring animations - The Blog of Maxime Heckelblog.maximeheckel.com