YoVDO

Framer Motion for React Tutorial

Offered By: Net Ninja via YouTube

Tags

React Courses Web Development Courses Animation Courses User Interface Design Courses Keyframes Courses Framer Motion Courses

Course Description

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

Related Courses

Animating React Components with Framer Motion
egghead.io
Animate React Apps with Framer Motion
egghead.io
Build and Deploy a Fullstack Responsive Portfolio Website - Ultimate Step by Step Tutorial 2022
JavaScript Mastery via YouTube
How to Make a React Website with Page Transitions Using Framer Motion
Brian Design via YouTube
Framer Motion - React Animation Library Crash Course
Laith Academy via YouTube