Skip to main content
CF

Advanced Animating React with Framer Motion

2h 57m 30s
English
Paid

Welcome to Advanced Animating React with Framer Motion! In this series, we will dive into more advanced concepts as well as discuss what is new in Framer Motion 2. Let’s dive in!

Additional

https://www.framer.com/api/motion/examples/ 

About the Author: Level Up Tutorials (Scott Tolinski)

Level Up Tutorials (Scott Tolinski) thumbnail

Level Up Tutorials is the online course platform of Scott Tolinski, a US developer best known as the co-host (with Wes Bos) of the long-running Syntax podcast. Level Up Tutorials has been publishing modern web-development course material continuously since 2012 — one of the longer-running independent course platforms in the JavaScript ecosystem.

The course catalog covers the modern full-stack JavaScript landscape: React (including Next.js), Svelte / SvelteKit (Scott has been a long-running advocate for Svelte), Vue, GraphQL, Node.js, MongoDB, the testing tracks, Tailwind CSS, animation patterns, and the surrounding tooling. Material is structured around long-form project-based tutorial series rather than disconnected feature videos.

The CourseFlix listing under this source carries over 10 Level Up Tutorials courses spanning that range. Material is paid; Level Up Tutorials runs on a monthly / annual subscription on the original platform. Courses are aimed at intermediate-and-up web developers.

Watch Online 17 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 17 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: #0 What's New In Framer Motion 2
All Course Lessons (17)
#Lesson TitleDurationAccess
1
#0 What's New In Framer Motion 2 Demo
04:15
2
#1 Abstracting Animations
10:29
3
#2 Enhanced Abstractions
08:43
4
#3 Animating Flexbox With Layout
13:34
5
#4 Scale Correction
06:52
6
#5 Loading Loop
11:44
7
#6 Loading Takeover Transition
10:49
8
#7 Draggable Drawer
17:56
9
#8 Enhanced Drawer
10:33
10
#9 Draggable List
16:00
11
#10 Drag List with Handle
07:58
12
#11 Login Window
14:53
13
#12 Reusable Animated Router
10:41
14
#13 Repeat Options
08:20
15
#14 Count Down
10:17
16
#15 Two Way Drawer
08:58
17
#16 Where To Go From Here
05:28
Unlock unlimited learning

Get instant access to all 16 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Related courses

Frequently asked questions

What are the prerequisites for enrolling in this course?
Prospective students should have a solid understanding of React, as this course builds on advanced animation techniques using Framer Motion 2. Familiarity with JavaScript and CSS is also recommended to fully grasp the concepts discussed in the lessons.
What projects will students build throughout the course?
Students will work on a variety of projects, including animating a Flexbox layout, creating a draggable drawer and list, building a login window, and developing a reusable animated router. These projects are designed to provide hands-on experience with the advanced features of Framer Motion 2.
Who is the target audience for this course?
This course is aimed at developers who are already familiar with React and want to enhance their skills in animation using Framer Motion 2. It's particularly suitable for those interested in creating sophisticated user interfaces with advanced animation capabilities.
What specific tools or platforms are covered in the course?
The course focuses on Framer Motion 2, a popular animation library for React. It covers new features introduced in this version and demonstrates how to use them effectively to create dynamic animations in web applications.
How does the depth of this course compare to similar courses?
This course delves into advanced concepts of animating with Framer Motion 2, going beyond basic animations to cover topics like abstracting animations, enhanced abstractions, and creating reusable components. It's more specialized than general React courses, with a strong focus on animation techniques.
What topics are not covered in this course?
The course does not cover the basics of React or JavaScript. It assumes students already have these foundational skills. Additionally, it does not delve into other animation libraries or frameworks outside of Framer Motion 2.
What is the time commitment required for this course?
The course comprises 17 lessons, each focusing on different aspects of advanced animation techniques using Framer Motion 2. The total runtime is 00:00:00, suggesting that prospective students should check for updated details on the actual length to gauge the time commitment accurately.