CF

Framer Motion Recipes

3h 8m 18s
English
Paid
Added to CourseFlix

Framer Motion Recipes is a 8-lesson 3 hours 8 minutes self-paced course by Build UI. Framer Motion is a popular React animation library.

Course facts

Lessons
8
Duration
3 hours 8 minutes
Language
English
Added to CourseFlix
December 2023
Instructor
Build UI
Price
Premium

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

Who teaches Framer Motion Recipes? 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.

What lessons are included in Framer Motion Recipes?

This is a demo lesson (10:00 remaining)

Watch the first 10 minutes free. One payment unlocks all 8 lessons here and every other premium course. No auto-renew.

Watch all 8 lessons from $6.67/mo
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
Watch the other 7 lessons

One payment unlocks this course and every other premium course. No auto-renew.

See plans

What courses are similar to Framer Motion Recipes?

  • ScrollTrigger Express thumbnailUpdated 1mo ago

    ScrollTrigger Express

    By: Creative Coding Club
    Master GreenSock's ScrollTrigger plugin step by step and build precise, high-performance scroll-based animations without extra libraries.
    10h 31m
  • Whimsical Animations thumbnailUpdated 11mo 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.
    5h 7m
  • Animations on the web thumbnailUpdated 1y ago

    Animations on the web

    By: Emil Kowalski
    Learn how to craft animations that make people feel something. It's for those that like my style of animations and/or anyone aspiring to improve their skills. T
    2h 23m3/5
  • B-Sides, Bonuses and Oddities thumbnailUpdated 2y ago

    B-Sides, Bonuses and Oddities

    By: Creative Coding Club
    After completing the Greensock basics in the "Express" and "Beyond the Basics" courses, we will now apply the acquired knowledge in practice.
    17h 55m
  • Advanced FrontEnds thumbnailUpdated 3y ago

    Advanced FrontEnds

    By: Gary Simon
    "Advanced FrontEnds" is a comprehensive course by Gary Simon, focusing on creating highly animated, interactive landing pages.
    8h 58m
  • Rive: Interactive Motion thumbnailUpdated 6mo 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.
    26h 41m
  • Creating a simple portfolio website with WebGL and Barba.js thumbnailUpdated 3y ago

    Creating a simple portfolio website with WebGL and Barba.js

    By: Awwwards
    Nothing beats smooth user experience. That is the reason we love WebGL, because we can do crazy effects with amazing performance. But if you combine that with s
    3h 41m
  • SVG Animation with GreenSock thumbnailUpdated 1mo ago

    SVG Animation with GreenSock

    By: Creative Coding Club
    Learn to draw, edit, and animate SVG graphics with GreenSock, focused on the tags and techniques that matter for real animation projects.
    12h 34m

More courses by Build UI

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.