Skip to main content

Framer Motion Recipes

3h 8m 18s
English
Paid

Course description

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.

Watch Online

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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

  • Developing LLM App Frontends with Streamlit

    Developing LLM App Frontends with Streamlit

    Sources: zerotomastery.io
    This byte-sized course will teach Streamlit fundamentals and how to use Streamlit to create a frontend for your LLM-powered applications.
    1 hour 43 minutes 52 seconds
  • Module Federation: Microservices for the Frontend

    Module Federation: Microservices for the Frontend

    Sources: Michael Guay
    Learn how Module Federation helps in building a microservices architecture for the frontend. Understand the setup of a modular interface and independent...
    1 hour 20 minutes 26 seconds
  • Full-Stack Fundamentals 1 - Frontend

    Full-Stack Fundamentals 1 - Frontend

    Sources: Mckay Wrigley (takeoff)
    As part of this project, you will create your personal portfolio website from scratch. This will be an excellent way to showcase your work as you...
    1 hour 8 minutes 57 seconds
  • Full-Stack Fundamentals 4 - Payments

    Full-Stack Fundamentals 4 - Payments

    Sources: Mckay Wrigley (takeoff)
    In the previous section, we successfully implemented user authentication using Clerk. Now, based on this project, we will add online payment processing with...
    54 minutes 17 seconds
  • Building Full-Stack Apps with AI

    Building Full-Stack Apps with AI

    Sources: Mckay Wrigley (takeoff)
    The course "Building Full-Stack Apps with AI" teaches how to create comprehensive applications using artificial intelligence, suitable for both beginners and...
    8 hours 3 minutes 16 seconds