Framer Motion Recipes
Framer MotionTaught 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
Headed to SF for NextjsConf — downloaded Framer Motion Recipes for the flight.
These videos are amazing and worth every penny!
Organizer of React Miami
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.
Co-founder of Campsite
The videos are fantastic.
I have a ton of respect for Sam as an engineer and educator, truly world-class!
Developer Relations at Together AI
Lessons
Learn the basics of state-based animation with Framer Motion.
Add animation to unmounting elements using the versatile AnimatePresence component.
Use scroll-based animation to smoothly grow and shrink a fixed header.
Add a fading nav and a blurred background effect by extracting a reusable Hook.
Learn how to use the `x` shorthand property to smoothly animate an image container.
Use an animated aspect ratio to create a navigation bar inspired by iOS Photos.
Use measured height to resize a panel with dynamic content.
Buy Framer Motion Recipes
Add beautiful animations to your React apps using Framer Motion.
Buy the course
Get everything in Framer Motion Recipes.
- 3+ hours of video
- 8 lessons
- Private Discord
- Summaries with code
- Unlimited access to course materials
Lifetime membership
Get lifetime access to every Build UI course, including Framer Motion Recipes, forever.
- Access to all five Build UI courses
- Full access to all future Build UI courses
- Summaries with code
- Video downloads
- Working code demos
- Private Discord
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!
Meet the team
Hey! We're Sam Selikoff and Ryan Toronto, and together we've been teaching frontend development for over eight years through our podcast, in-person trainings, conference talks, and more recently on our YouTube channels.
We love sharing what excites us about frontend development. Check out our YouTube channels and conference talks to get a feel for our teaching style.
Sam's YouTube
Ryan's YouTube