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

Watch Online Framer Motion Recipes

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

HTMX - The Practical Guide

HTMX - The Practical Guide

Sources: Academind Pro
Are you tired of picking the right JS library from a vast sea of libraries? And do you sometimes feel like frontend JavaScript development & code became unnecessarily complex? H...
4 hours 5 minutes
The Complete Junior to Senior Web Developer Roadmap (2023)

The Complete Junior to Senior Web Developer Roadmap (2023)

Sources: udemy
This is the tutorial you've been looking for to no longer be a junior developer, level up your skills, and earn a higher salary. This extensive course doesn’t j
37 hours 7 minutes 57 seconds
Clean Code: Writing Code for Humans

Clean Code: Writing Code for Humans

Sources: pluralsight
Anyone can write code a computer can understand, but professional developers write code *humans* can understand. Clean code is a reader-focused development styl
3 hours 10 minutes 36 seconds
The Complete 2023 Web Development Bootcamp

The Complete 2023 Web Development Bootcamp

Sources: udemy
Welcome to the Complete Web Development Bootcamp, the only course you need to learn to code and become a full-stack web developer. With over 12,000 ratings and a 4.8 average, my...
62 hours 32 minutes 23 seconds