The Code Creative/Motion Mastery: Animations for React Developers

  • $46.99

Motion Mastery: Animations for React Developers

  • Closed
  • Course
  • 153 Lessons

Master the newly rebranded Motion library (formerly Framer Motion) in this comprehensive and ever-growing course! We guide you through the entire API step-by-step, showing you how to create interactive animations that elevate your React projects.

Important: Everything you’ll learn in this course works seamlessly with the latest updates to Motion, ensuring your skills remain relevant and future-proof!

👨🏻‍💻 Created by The Code Creative


🕑 Last updated 04/2025

🌐 English

This course includes: 🖥 6.5 hours of video lessons, quizzes, and downloadable code

Requirements: Basic knowledge of HTML/CSS/JavaScript/ReactJS

Unlock React Animations the Easy Way!

Learn Motion with Clear, Step-by-Step Tutorials.

Want to add captivating animations to your React projects without getting bogged down in complex code or confusing concepts? Have you found other animation libraries intimidating or difficult to grasp?

As someone who believes in making complex topics accessible, I've designed this Motion course to be straightforward and easy to follow. You'll learn the fundamentals and practical techniques of Motion in a clear, step-by-step manner, allowing you to start animating your React components quickly and effectively.

Here's what you'll gain:

  • A clear understanding of Motion's intuitive API.

  • Practical techniques for creating common animation patterns and effects.

  • Confidence in implementing animations without feeling overwhelmed.

  • The ability to add visual flair and enhance user interaction in your React applications.

  • A solid foundation in React animation using one of the most popular libraries.

This course includes over 6 hours of easy-to-understand video lessons, helpful quizzes to test your knowledge, and downloadable code examples so you can follow along and apply what you learn immediately. Stop feeling intimidated by animation and discover how simple and powerful Motion can be!

Contents

1. An Introduction to Motion

Course Intro and Walkthrough
Preview
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?
Preview
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
Preview
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
Preview
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

Testimonials

🙂 Thanks for the expert instruction! I just finished the Scrollytelling class and I highly recommend it. Looking forward to more in the future, thanks again.

John Brady

Website

Gregg addresses the points that you will encounter in real life projects.  No matter what JavaScript library you are using or planning to use, Gregg's courses are essential for any kind of front-end development. I took the first course and went back to Gregg's website and purchased the other ones. I wish I knew about Gregg's courses many years ago. 

DH

Gregg does a great job of clarifying web concepts, especially on the DOM. His teaching is broken down into easily digestible lessons with a welcome touch of humor. I recommend his courses without any appeal, the quality is 100% guaranteed.

Jean-Patrice Calvez

Excellent work, thank you for sharing your knowledge and not just writing code with some background music!

Michel Franco

What I love about Gregg's videos is that they are not only inviting and easy to follow, but they're full of so many little gems; awesome insights and tricks that aren't even the topic of the video just extra embedded gem

Frazer Kirkman

Just a big thank you for this amazing course, I learned a lot, and I am confident to implement some of those techniques in my future projects, my portfolio for example. Your way of teaching is nice, funny and really easy to follow even for a non-English native speaker as I am. And some of the tips you gave us during some lessons are just perfect. 

Frederic Guerra

Frequently asked questions

Who is this course suitable for?

This course is perfect for developers with a basic understanding of JavaScript and React who want to enhance their skills in creating animations. Whether you're a beginner looking to dive into Framer Motion or an experienced developer aiming to refine your animation techniques, this course offers a comprehensive guide to mastering the Framer Motion API. If you're eager to add dynamic and engaging animations to your web projects, this course is for you!

What topics does this course cover?

This course covers a wide range of topics related to Framer Motion, including:

  • Understanding the motion component and how to create basic animations

  • Using animation sequences and keyframes for more complex motion

  • Implementing gestures for interactive animations

  • Utilizing motion values and various hooks like useSpring, useTransform, and useVelocity

  • Mastering AnimatePresence for managing entrance and exit animations

  • Exploring the Reorder component and how to implement responsive animations

  • Applying useReducedMotion for accessibility

  • Leveraging lazyMotion for optimized performance

  • Writing imperative animations with the animate function

  • Working with variants, animation controls, and scroll-linked animations

With these topics, you'll gain a solid understanding of how to use Framer Motion effectively in your React project

How long is the course?

The course is comprised of 63 lessons and includes approximately 4 hours of video content. You can take the course at your own pace and go through the sections and lessons as many times as you need to!

Are there any prerequisites for this course?

You should have basic knowledge of HTML, CSS, JavaScript, and ReactJS before taking this course.

What is the format of the course?

The course is composed of several sections containing short and concise video lessons, making it easy to follow along and absorb the content.

How long will I have access to the course?

You’ll have lifetime access to this course for as long as it exists online, on this platform, or any other platform!

Is my purchase/credit card secure?

Yes, Podia(the platform that hosts this course) uses Stripe and PayPal to handle the billing and provide secure encryption for all online transactions.

Meet Your Instructor: Gregg Fine


Meet Gregg Fine, the mastermind behind "The Code Creative" - a full-stack web developer who transforms ideas into stunning and impactful websites, e-commerce stores, and web applications for individuals, brands, and agencies alike. 

Before immersing himself in the world of web development, Gregg was a sought-after music producer, working with big names in advertising from Calvin Klein to YSL to Old Navy.

Not only does he bring his vast expertise to the table, but he also has a passion for sharing his knowledge. As the host of The Code Creative YouTube Channel, Gregg demystifies the world of web development and helps you understand the latest trends and technologies.

He's also a prolific author, with 20 courses published on macProVideo covering a wide range of topics from coding with the Web Audio API to the intersection of music theory and technology.

Gregg is dedicated to helping you succeed and stay up-to-date in the ever-evolving world of coding. Through his blog,  The Code Creative Blog, he provides valuable insights and tips on coding, web development, and SEO. 

With Gregg as your guide, you'll feel confident and prepared to tackle any coding challenge that comes your way!