Motion Mastery: Animations for React Developers
Buy now
Learn more
1. An Introduction to Motion
Course Intro and Walkthrough
Installation and Setup
***Update Note: Framer Motion becomes Motion!
2. Motion Core Fundamentals
Understanding the Motion Component
Motion Core Fundamentals: Quiz
Solution to the Motion Component Challenge
Basic Motion Component Solution: Quiz
Using the Motion Component with SVGs
SVG Motion Components: Quiz
The Power of Keyframes
Keyframe Animations: Quiz
Solution to the Keyframes Challenge
In Practice: 3 Popular Text Animation Effects
module-002_code.zip
3. Creating User Interactions with Gestures
Gestures Explained
Gestures Explained: Quiz
The whileFocus Gesture
The whileFocus Gesture: Quiz
Creating instantly draggable elements with whileDrag
The whileDrag Gesture: Quiz
Drag Constraints: fine-tuning your drags
Drag Constraints: Quiz
Drag Gestures: a Plethora of Features!
Drag Gestures: a Plethora of Features!: Quiz
Drag Controls: Controlling an element's drag via a different element
Drag Controls: Quiz
Gesture Event Callbacks: Why they are useful
Gesture Event Callbacks: Quiz
Creating a Tooltip Animation with Gesture Event Callbacks
Creating a Confirmation Button with Gesture Event Callbacks
Gesture Event Callback Arguments
Gesture Event Callback Arguments: Quiz
Using Gesture Event Callbacks with Drag Events
module-003_code.zip
4. Layout Animations: My Favorite Motion Feature!
What are Layout Animations?
Layout Animations: Quiz
Animating a Grid of Flexbox Items
Preventing Distortion on Child Layout Elements
Exploring the LayoutGroup Component
The LayoutGroup Component: Quiz
The Awesome Power of Shared Layouts and the LayoutId
Shared Layouts and the LayoutId: Quiz
module-004_code.zip
5. Scroll-Triggered Animations
Scroll-Triggered vs. Scroll-Scrubbed (Linked) Animations
Scroll-Triggered vs. Scroll-Scrubbed Animations: Quiz
Scroll-Triggered Viewport Options
Scroll-Triggered Viewport Options: Quiz
Redefining the Viewport with the Margin Property
module-005_code.zip
6. Motion Values: a Fundamental Motion Concept
Understanding Motion Values and the useMotionValue Hook
Motion Values: Quiz
Solution to the Motion Value Challenge
Exploring the useMotionValueEvent Hook
The useMotionValueEvent Hook: Quiz
module-006_code.zip
7. The useTransform Hook
Mapping Values with the useTransform Hook
The useTransform hook: Quiz
Using Multiple useTransform Hooks
module-007_code.zip
8. The useMotionTemplate Hook
Understanding the useMotionTemplate Hook and Tagged Template Literals
Animating Linear-Gradients with the useMotionTemplate Hook
The useMotionTemplate hook: Quiz
module-008_code.zip
9. The useSpring Hook
Adding Playful, Dynamic Spring Effects with the useSpring Hook
The useSpring hook: Quiz
module-009_code.zip
10. Scroll-Scrubbed (Linked) Animations
Exploring the useScroll Hook
The useScroll hook: Quiz
Defining a Container for useScroll
useScroll Targets and Offsets
Assigning a Different Element as the Target
The useScroll hook options object: Quiz
module-010_code.zip
11. The useTime Hook
Tapping into the Browser's Rendering Cycle with the useTime Hook
The useTime hook: Quiz
module-011_code.zip
12. The useVelocity Hook
Creating Animations that Respond to Velocity with the useTime Hook
The useVelocity hook: Quiz
module-012_code.zip
13. Variants
The 2 Main Benefits of Motion Variants
Variants: Quiz
Parent/Child Orchestration with Variants
Parent/Child Orchestration: Quiz
Creating Staggered Animations with Variants
Staggered animations: Quiz
module-013_code.zip
14. Transitions Explored
Transition Delays
Transition Repeats
Transition RepeatType
Value-Specific Transitions
Transition Types
Basic Easings Explained
Dramatic Easings: "anticipate" and "back"
Circular Easings
Custom Easing with Cubic-Bezier Functions
Transitions: Quiz
module-014_code.zip
15. Spring-Physics-Based Animations Explained
Understanding Spring-Physics-Based Animations
Stiffness, Damping, and Mass Explored
Spring Physics: Quiz
Using the Spring Visualizer
Duration-Based-Springs
The visualDuration Property
Duration-Based-Springs: Quiz
16. Inertia-Based Animations Explained
Understanding Inertia-Based Animations
Fine-Tuning with the “power” and “timeConstant” properties
Exploring the modifyTarget Property
Constraining inertia with "min" and "max" values
Inertia-Based Animations: Quiz
17. Animate Presence
Understanding the "exit" prop and Why AnimatePresence is Useful
Animating Multiple Child Elements with AnimatePresence
AnimatePresence: Quiz
Creating Page Transition Animations
Page Transition Animations: Quiz
Creating Modal Animations
Modal Animations: Quiz
module-015_code.zip
18. The Reorder Component
Creating Animated Reorderable Lists
Reordering with an Array of Objects
Using Reorder with AnimatePresence
The Reorder Component: Quiz
module-016_code.zip
19. MotionConfig
Create Global Transition and reduceMotion Settings with MotionConfig
MotionConfig: Quiz
module-017_code.zip
20. The useReducedMotion Hook
Create Accessible Animations with the useReducedMotion Hook
The useReducedMotion hook: Quiz
module-018_code.zip
21. LazyMotion
Using LazyMotion to Load a Feature Subset
Using LazyMotion for Lazy Loading
The LazyMotion component: Quiz
module-019_code.zip
22. The useAnimate Hook
Work with the Scoped "animate" Function to Write Powerful, Imperative Code
The useAnimate hook: Quiz
module-020_code.zip
23. Creating Animation Controls
Give Users Control of Your Animations with these Custom Animation Controls
Animation Controls: Quiz
module-021_code.zip
24. Sequencing Animations
Creating an Animated Sequence for a Single Element
Creating an Animated Sequence for Multiple Elements
Sequence Keywords and Operators
Sequencing Animations: Quiz
module-022_code.zip
25. SVG Animations
Animate SVGs with the "pathLength" Property and the "custom" Prop
SVG Line Drawing: Quiz
Animating Shapes and Paths
Animating Dashed Paths with pathSpacing
SVG Shapes, Paths, and more!: Quiz
The Power of pathOffset Animations
SVG Path Morphing with Motion and Flubber.js - Pt. 1
SVG Path Morphing with Motion and Flubber.js - Pt. 2
SVG Path Morphing: Quiz
module-023_code.zip
Products
Course
Section
25. SVG Animations
25. SVG Animations
Motion Mastery: Animations for React Developers
Buy now
Learn more
1. An Introduction to Motion
Course Intro and Walkthrough
Installation and Setup
***Update Note: Framer Motion becomes Motion!
2. Motion Core Fundamentals
Understanding the Motion Component
Motion Core Fundamentals: Quiz
Solution to the Motion Component Challenge
Basic Motion Component Solution: Quiz
Using the Motion Component with SVGs
SVG Motion Components: Quiz
The Power of Keyframes
Keyframe Animations: Quiz
Solution to the Keyframes Challenge
In Practice: 3 Popular Text Animation Effects
module-002_code.zip
3. Creating User Interactions with Gestures
Gestures Explained
Gestures Explained: Quiz
The whileFocus Gesture
The whileFocus Gesture: Quiz
Creating instantly draggable elements with whileDrag
The whileDrag Gesture: Quiz
Drag Constraints: fine-tuning your drags
Drag Constraints: Quiz
Drag Gestures: a Plethora of Features!
Drag Gestures: a Plethora of Features!: Quiz
Drag Controls: Controlling an element's drag via a different element
Drag Controls: Quiz
Gesture Event Callbacks: Why they are useful
Gesture Event Callbacks: Quiz
Creating a Tooltip Animation with Gesture Event Callbacks
Creating a Confirmation Button with Gesture Event Callbacks
Gesture Event Callback Arguments
Gesture Event Callback Arguments: Quiz
Using Gesture Event Callbacks with Drag Events
module-003_code.zip
4. Layout Animations: My Favorite Motion Feature!
What are Layout Animations?
Layout Animations: Quiz
Animating a Grid of Flexbox Items
Preventing Distortion on Child Layout Elements
Exploring the LayoutGroup Component
The LayoutGroup Component: Quiz
The Awesome Power of Shared Layouts and the LayoutId
Shared Layouts and the LayoutId: Quiz
module-004_code.zip
5. Scroll-Triggered Animations
Scroll-Triggered vs. Scroll-Scrubbed (Linked) Animations
Scroll-Triggered vs. Scroll-Scrubbed Animations: Quiz
Scroll-Triggered Viewport Options
Scroll-Triggered Viewport Options: Quiz
Redefining the Viewport with the Margin Property
module-005_code.zip
6. Motion Values: a Fundamental Motion Concept
Understanding Motion Values and the useMotionValue Hook
Motion Values: Quiz
Solution to the Motion Value Challenge
Exploring the useMotionValueEvent Hook
The useMotionValueEvent Hook: Quiz
module-006_code.zip
7. The useTransform Hook
Mapping Values with the useTransform Hook
The useTransform hook: Quiz
Using Multiple useTransform Hooks
module-007_code.zip
8. The useMotionTemplate Hook
Understanding the useMotionTemplate Hook and Tagged Template Literals
Animating Linear-Gradients with the useMotionTemplate Hook
The useMotionTemplate hook: Quiz
module-008_code.zip
9. The useSpring Hook
Adding Playful, Dynamic Spring Effects with the useSpring Hook
The useSpring hook: Quiz
module-009_code.zip
10. Scroll-Scrubbed (Linked) Animations
Exploring the useScroll Hook
The useScroll hook: Quiz
Defining a Container for useScroll
useScroll Targets and Offsets
Assigning a Different Element as the Target
The useScroll hook options object: Quiz
module-010_code.zip
11. The useTime Hook
Tapping into the Browser's Rendering Cycle with the useTime Hook
The useTime hook: Quiz
module-011_code.zip
12. The useVelocity Hook
Creating Animations that Respond to Velocity with the useTime Hook
The useVelocity hook: Quiz
module-012_code.zip
13. Variants
The 2 Main Benefits of Motion Variants
Variants: Quiz
Parent/Child Orchestration with Variants
Parent/Child Orchestration: Quiz
Creating Staggered Animations with Variants
Staggered animations: Quiz
module-013_code.zip
14. Transitions Explored
Transition Delays
Transition Repeats
Transition RepeatType
Value-Specific Transitions
Transition Types
Basic Easings Explained
Dramatic Easings: "anticipate" and "back"
Circular Easings
Custom Easing with Cubic-Bezier Functions
Transitions: Quiz
module-014_code.zip
15. Spring-Physics-Based Animations Explained
Understanding Spring-Physics-Based Animations
Stiffness, Damping, and Mass Explored
Spring Physics: Quiz
Using the Spring Visualizer
Duration-Based-Springs
The visualDuration Property
Duration-Based-Springs: Quiz
16. Inertia-Based Animations Explained
Understanding Inertia-Based Animations
Fine-Tuning with the “power” and “timeConstant” properties
Exploring the modifyTarget Property
Constraining inertia with "min" and "max" values
Inertia-Based Animations: Quiz
17. Animate Presence
Understanding the "exit" prop and Why AnimatePresence is Useful
Animating Multiple Child Elements with AnimatePresence
AnimatePresence: Quiz
Creating Page Transition Animations
Page Transition Animations: Quiz
Creating Modal Animations
Modal Animations: Quiz
module-015_code.zip
18. The Reorder Component
Creating Animated Reorderable Lists
Reordering with an Array of Objects
Using Reorder with AnimatePresence
The Reorder Component: Quiz
module-016_code.zip
19. MotionConfig
Create Global Transition and reduceMotion Settings with MotionConfig
MotionConfig: Quiz
module-017_code.zip
20. The useReducedMotion Hook
Create Accessible Animations with the useReducedMotion Hook
The useReducedMotion hook: Quiz
module-018_code.zip
21. LazyMotion
Using LazyMotion to Load a Feature Subset
Using LazyMotion for Lazy Loading
The LazyMotion component: Quiz
module-019_code.zip
22. The useAnimate Hook
Work with the Scoped "animate" Function to Write Powerful, Imperative Code
The useAnimate hook: Quiz
module-020_code.zip
23. Creating Animation Controls
Give Users Control of Your Animations with these Custom Animation Controls
Animation Controls: Quiz
module-021_code.zip
24. Sequencing Animations
Creating an Animated Sequence for a Single Element
Creating an Animated Sequence for Multiple Elements
Sequence Keywords and Operators
Sequencing Animations: Quiz
module-022_code.zip
25. SVG Animations
Animate SVGs with the "pathLength" Property and the "custom" Prop
SVG Line Drawing: Quiz
Animating Shapes and Paths
Animating Dashed Paths with pathSpacing
SVG Shapes, Paths, and more!: Quiz
The Power of pathOffset Animations
SVG Path Morphing with Motion and Flubber.js - Pt. 1
SVG Path Morphing with Motion and Flubber.js - Pt. 2
SVG Path Morphing: Quiz
module-023_code.zip
10 Lessons
Animate SVGs with the "pathLength" Property and the "custom" Prop
SVG Line Drawing: Quiz
Animating Shapes and Paths
Animating Dashed Paths with pathSpacing
SVG Shapes, Paths, and more!: Quiz
The Power of pathOffset Animations
SVG Path Morphing with Motion and Flubber.js - Pt. 1
SVG Path Morphing with Motion and Flubber.js - Pt. 2
SVG Path Morphing: Quiz
module-023_code.zip