Skip to main content
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

Course content

8 lessons · 3h 8m 18s
Lessons
  1. 1 Multistep wizard 25:16
  2. 2 Email client 16:44
  3. 3 Fixed header: Part 1 18:55
  4. 4 Fixed header: Part 2 17:09
  5. 5 Carousel: Part 1 14:01
  6. 6 Carousel: Part 2 22:05
  7. 7 Resizable panel 34:20
  8. 8 Calendar 39:48

Related courses

  • Whimsical Animations thumbnailUpdated 5mo ago

    Whimsical Animations

    By: Josh Comeau
    Whimsical Animations helps you build smooth and fun web effects. You will learn how to make small touches and clear moments that guide the user.
    5 hours 7 minutes 31 seconds
  • Rive: Interactive Motion thumbnailUpdated 1mo ago

    Rive: Interactive Motion

    By: Motion Design School
    Master Rive to create interactive UI elements, animations for the web and games. Learn about working with bones, exporting, and integration with Unity.
    26 hours 41 minutes 10 seconds
  • Animating the web with Framer Motion thumbnailClassic

    Animating the web with Framer Motion

    By: Jeroen Reumkens
    Making smooth, performant and beautiful animations is hard. Framer Motion helps you overcome a lot of these struggles. In this course, I'll guide you through ev
    6 hours 3 minutes 51 seconds 5 / 5

Frequently asked questions

What is Framer Motion Recipes about?
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…
Who teaches Framer Motion Recipes?
Framer Motion Recipes is taught by Build UI. You can find more courses by this instructor on the corresponding source page.
How long is Framer Motion Recipes?
Framer Motion Recipes contains 8 lessons with a total runtime of 3 hours 8 minutes. All lessons are available to watch online at your own pace.
Is Framer Motion Recipes free to watch?
Framer Motion Recipes is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch Framer Motion Recipes online?
Framer Motion Recipes is available to watch online on CourseFlix at https://courseflix.net/course/framer-motion-recipes. The page hosts every lesson with the integrated video player; no download is required.