Pro course

Framer Motion Recipes

Framer Motion
8 Lessons
3h 8m
Sam Selikoff

Taught by

Sam Selikoff

Framer Motion is a popular React animation library. It features both declarative and imperative APIs, so you can add common animations in just a few lines of code, or drop down a level to build truly custom effects. It's maintained by Framer, has an active community, and follows the latest best practices used in the React ecosystem.

In this course you'll learn Framer Motion from scratch by building six animated components. You'll start with the fundamentals of state-based animation, learn how to animate an unmounting component, create a reusable hook that can animate style properties on scroll, and use dynamic variants to customize an animation based on component state.

What people say about our Framer Motion videos

Michelle Bakels

Headed to SF for NextjsConf — downloaded Framer Motion Recipes for the flight.

These videos are amazing and worth every penny!

Michelle Bakels

Organizer of React Miami

Brian Lovin

Sam Selikoff is one of the best programming teachers in the game.

I've been watching every YouTube video for the past while and learned so much.

Brian Lovin

Co-founder of Campsite

Hassan El Mghari

The videos are fantastic.

I have a ton of respect for Sam as an engineer and educator, truly world-class!

Hassan El Mghari

Developer Relations at Together AI

Lessons

Multistep wizard25:15

Learn the basics of state-based animation with Framer Motion.

Email client16:43

Add animation to unmounting elements using the versatile AnimatePresence component.

Fixed header: Part 118:54

Use scroll-based animation to smoothly grow and shrink a fixed header.

Fixed header: Part 217:08

Add a fading nav and a blurred background effect by extracting a reusable Hook.

Carousel: Part 114:00

Learn how to use the `x` shorthand property to smoothly animate an image container.

Carousel: Part 222:04

Use an animated aspect ratio to create a navigation bar inspired by iOS Photos.

Resizable panel34:19

Use measured height to resize a panel with dynamic content.

Calendar39:47

Animate an infinite monthly calendar using direction-aware dynamic variants.

Buy Framer Motion Recipes

Add beautiful animations to your React apps using Framer Motion.

Buy the course

$149one-time payment

Get everything in Framer Motion Recipes.

  • 3+ hours of video
  • 8 lessons
  • Private Discord
  • Summaries with code
  • Unlimited access to course materials

Lifetime membership

$199
access all coursesone-time payment

Lifetime access to all current and future premium Build UI courses, forever.

  • Access to all five Build UI courses
  • New videos added regularly
  • Refactoring videos on React
  • Private Discord
  • Summaries with code
  • Full access to all future Build UI courses

What's included

Stream or download every video

Watch every lesson directly on Build UI, or download them to watch offline at any time.

Live code demos

Access to a live demo of each lesson that runs directly in your browser.

Private Discord

Chat with Sam, Ryan and other Build UI members about the lessons – or anything else you're working on – in our private server.

Video summaries with code snippets

Quickly reference a lesson's material with text summaries and copyable code snippets.

Source code

Each lesson comes with a GitHub repo that includes a diff of the source code.

Invoices and receipts

Get reimbursed from your employer for becoming a better coder!