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

ScrollTrigger Express

ScrollTrigger Express

Sources: Carl (Creative Coding Club)
ScrollTrigger is GreenSock's most revolutionary plugin to date. With its help, you can control all your animations with precision and...
10 hours 31 minutes 38 seconds
UI Architecture Academy

UI Architecture Academy

Sources: Logic Room
"Academy of UI Architecture" is a 12-module program that will teach you how to develop, test, and scale user interfaces. During the course, students undergo...
21 hours 37 minutes 23 seconds
The Approachable Guide to Accessible Components

The Approachable Guide to Accessible Components

Sources: fullstack.io
"A Clear Guide to Creating Accessible Components" is intended to provide a comprehensive understanding of web accessibility. The course covers the basics...
2 hours 19 minutes 45 seconds
Web Components Demystified

Web Components Demystified

Sources: Scott Jehl
If you are like me, then you have probably been hearing a lot about web components lately. Many of us are looking for ways to integrate web components into...
7 hours 51 minutes 36 seconds
Build a Full Stack Blog with Astro

Build a Full Stack Blog with Astro

Sources: egghead
Master the creation of a fully-featured blog on Astro. Learn to style pages, work with components, integrate the backend, and apply SEO optimization...
2 hours 43 minutes 16 seconds