Matt Perry from Framer and I take a look at the React animation library Framer Motion.
First, we take a look at how simple the API is. You control everything very declaratively through props on elements in your JSX. Controlling animation at this layer is very intuitive and connected to the UI and state in a meaningful way.
Each example we look at is more real-world and involves more features of what Framer Motion is capable of. React developers will love the syntax of it all, and everyone else will love the incredibly performant and smooth results.
We end looking at Framer itself, which uses this exact library internally to do all the animation things Framer does. Intrigued by Framer? Download Framer X.
Demo 1: Basic Syntax
Demo 2: Variants
Demo 3: AnimatePresence and layoutTransition
Bonus: check out the “scroll to dismiss” functionality on the image popup.
