CF

Framer Motion Recipes

3h 8m 18s
English
Paid

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.

Additional

https://github.com/builduilabs/framer-motion-recipes

About the Author: Build UI

Build UI thumbnail

Build UI is the paid screencast platform of Sam Selikoff and Ryan Toronto, both former Frontside / EmberConf instructors and now full-time independent React educators. The platform's signature is short, focused screencasts on specific React and Next.js patterns rather than multi-hour course bundles.

The CourseFlix listing carries six Build UI courses spanning React data fetching, server components, Next.js App Router patterns, and the practical side of building modern React applications. Material is paid and aimed at intermediate React developers who already know the basics and want depth on the patterns that show up in real production codebases.

Watch Online 8 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 8 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Multistep wizard
All Course Lessons (8)
#Lesson TitleDurationAccess
1
Multistep wizard Demo
25:16
2
Email client
16:44
3
Fixed header: Part 1
18:55
4
Fixed header: Part 2
17:09
5
Carousel: Part 1
14:01
6
Carousel: Part 2
22:05
7
Resizable panel
34:20
8
Calendar
39:48
Unlock unlimited learning

Get instant access to all 7 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Related courses

Frequently asked questions

What prerequisites are needed before taking this course?
Before taking this course, you should have a basic understanding of React, as Framer Motion is a React animation library. Familiarity with JavaScript and CSS would also be beneficial, as these are fundamental to working effectively with animations in React.
What projects will I build during the course?
During the course, you'll build six animated components. These include a multistep wizard, an email client, a fixed header, a carousel, a resizable panel, and a calendar. Each project will help reinforce different aspects of using Framer Motion to create animations in React applications.
Who is the target audience for this course?
This course is intended for developers who want to improve their skills in creating animations within React applications. It is suitable for those who are already comfortable with React and wish to learn how to leverage Framer Motion to add animations to their projects.
How does the depth of this course compare to other animation courses?
This course offers a practical approach to learning Framer Motion by focusing on building real-world components. It covers both the declarative and imperative APIs of the library, providing a balanced understanding that can be deeper than some introductory courses focused solely on basic animations.
What specific tools or platforms does this course focus on?
The course specifically focuses on Framer Motion, a React animation library. It also involves using React itself, as all projects and lessons are built within the context of a React application, and JavaScript for handling logic and animations.
What topics are not covered in this course?
The course does not cover general React development or deep JavaScript fundamentals. It focuses specifically on implementing animations using Framer Motion within a React environment, so broader topics like state management or advanced React patterns are not discussed.
How much time should I expect to commit to this course?
The course consists of 8 lessons, and the total runtime is currently unspecified. However, given the number of projects and the need to practice building animated components, you should plan to spend several hours in total, including time for experimenting and applying what you've learned.