✳flâneur — a map of the web's best reading

Inside Framer's Magic Motion

nan.fyi · 4,296 words · saved by 4 readers

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

Explore this link on the map →

saved by

related reading