Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

Framer Motion for React Tutorial

Net Ninja via YouTube

Overview

In this course, you will learn about Framer Motion for React. You will learn about project setup, animating elements, initial animation state, transition options, hover animations, variants, keyframes, repeating animations, animate presence, animating routes, modal animation, animating SVG’s, creating a loader, useCycle hook, and dragging items.

Syllabus

Framer Motion (for React) #1 - Introduction.
Framer Motion (for React) #2 - Project Setup.
Framer Motion (for React) #3 - Animating Elements.
Framer Motion (for React) #4 - Initial Animation State.
Framer Motion (for React) #5 - Transition Options.
Framer Motion (for React) #6 - Hover Animations.
Framer Motion (for React) #7 - Variants (part 1).
Framer Motion (for React) #8 - Variants (part 2).
Framer Motion (for React) #9 - Keyframes.
Framer Motion (for React) #10 - Repeating Animations.
Framer Motion (for React) #11 - Animate Presence.
Framer Motion (for React) #12 - Animating Routes.
Framer Motion (for React) #13 - Modal Animation (part 1).
Framer Motion (for React) #14 - Modal Animation (part 2).
Framer Motion (for React) #15 - Animating SVG's.
Framer Motion (for React) #16 - Creating a Loader.
Framer Motion (for React) #17 - UseCycle Hook.
Framer Motion (for React) #18 - Dragging Items & Wrap Up.

Taught by

The Net Ninja

Reviews

Start your review of Framer Motion for React Tutorial

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.