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

Web Performance Fundamentals

Web Performance Fundamentals

Sources: Nadia Makarevich
"The Fundamentals of Web Performance" focuses on the key aspects of improving the speed and responsiveness of web applications in the context of React...
Software Essentialist

Software Essentialist

Sources: Khalil Stemmler
Learn to write scalable, testable TypeScript and Master the 12 Essentials of design, architecture & testing from first principles.
34 hours 6 minutes 47 seconds
Scalable TDD & Testing

Scalable TDD & Testing

Sources: Logic Room
The course "Scalable TDD and Testing" will help JavaScript UI engineers master an approach to scalable testing that is not dependent on a specific framework.
2 hours 56 minutes 56 seconds
Scaling Web App Configuration with Environment Variables

Scaling Web App Configuration with Environment Variables

Sources: fullstack.io
This course examines in detail the use of the dotenv module for working with environment variables in JavaScript. You will learn to create nine different...
1 hour 53 minutes 25 seconds