#176: Working with Framer Motion

Avatar of Chris Coyier
Chris Coyier on

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

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.