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

Angular Styling & Animations (for Angular 2+)
Udemy
CSS Animation With Latest Effects - 2020
Udemy
The Ultimate CSS - Best Practise on Animations & Effects
Udemy
After Effects Motion Graphics Beast
Udemy
CSS Animations: Learn CSS Animations from Scratch
Udemy