Crafting beautifulOooohOooohAaaaahAaaaahexperiences with Motion for React(formerly Framer Motion)
The right animations breathe life into web pages, while over-the-top ones can be a distraction. In this course, I will teach you the perfect balance, diving deep into the world of meaningful animations.
You'll learn not just to animate, but to enhance user experience gracefully. Your skills will not only slide to the next level – they'll animate there, bringing a touch of elegance and functionality to every project!
Learn more about the courseCourse lessons
1. Introduction
A short intro to the course, what to expect from it, what skills are needed before starting this course, and why would you even bother learning Motion for React?
4 lessons
1. Introduction
A short intro to the course, what to expect from it, what skills are needed before starting this course, and why would you even bother learning Motion for React?
2. First steps
Assuming you have zero knowledge of Motion, I take you by the hand creating your first animation. Together we explore all basic APIs of Motion for React. Concepts that might sound boring at first, but are an essential foundation towards building more complex animations.
9 lessons
2. First steps
Assuming you have zero knowledge of Motion, I take you by the hand creating your first animation. Together we explore all basic APIs of Motion for React. Concepts that might sound boring at first, but are an essential foundation towards building more complex animations.
- 2.1Motion's core principles Free 01:31
- Installing Motion for React 03:26
- The Motion Component 04:10
- Creating your first animation 03:44
- Adding a from state to the animation 05:59
- Changing the default transition 09:35
- 2.7Make the animation loop with keyframes Free 08:03
- Adding interactivity: Hover, focus and tap 05:16
- Build a multi-step animation 13:36
3. Motion values
All APIs we discussed before are powered by motion values. You can however also use them directly, getting even more control over your animations.
5 lessons
3. Motion values
All APIs we discussed before are powered by motion values. You can however also use them directly, getting even more control over your animations.
4. Stepping up our game
If your animations are becoming slightly more advanced, there are a few more APIs that you might want to know about. Many result in less repetition and more readable code.
5 lessons
4. Stepping up our game
If your animations are becoming slightly more advanced, there are a few more APIs that you might want to know about. Many result in less repetition and more readable code.
5. How to make your animations responsive?
People visit the web with devices that all have different breakpoints. So what do we need to do if we want our animations to look different depending on a breakpoint?
5 lessons
5. How to make your animations responsive?
People visit the web with devices that all have different breakpoints. So what do we need to do if we want our animations to look different depending on a breakpoint?
6. Scroll animations
Scroll animations can make a page really immersive. In this module we'll be taking a look at how we can create them to enhance our pages even more.
8 lessons
6. Scroll animations
Scroll animations can make a page really immersive. In this module we'll be taking a look at how we can create them to enhance our pages even more.
- 6.1Trigger animations on scroll Free 02:38
- whileInView: Animate an element entering the viewport 15:15
- The useInView hook 09:13
- Scroll-driven animations 04:48
- useScroll: Making scroll-driven animations 09:41
- Tracking an element's position on screen 10:30
- Practicing the differences between scroll-driven and scroll-triggered animations 13:26
- Scroll animations with position sticky 17:29
7. Layout animations
Layout animations are a magical feature of Motion for React. They allow you to animate from one state of layout to another, pretty much effortlessly!
8 lessons
7. Layout animations
Layout animations are a magical feature of Motion for React. They allow you to animate from one state of layout to another, pretty much effortlessly!
- 7.1The most powerful feature of Motion for React Free 03:37
- Making your first layout animation 11:20
- Animating the impossible 11:31
- Challenges in layout animations 16:02
- Showing new elements 11:31
- Shared layout animations 06:33
- Even more advanced shared layout animations 13:48
- Bonus: The alternative to position absolute 13:27
8. Complex animations
So far we've only animated a single animation. A page really starts coming to life when animating multiple elements though. But how?
soon 🤩
8. Complex animations
So far we've only animated a single animation. A page really starts coming to life when animating multiple elements though. But how?
- Creating more complex animations using the animate() function Free
- Understanding the useAnimate hook
- Animating elements with the animate function
- Defining the animation starting point
- Making animations loop
- Controlling the animation
- Multiple animations in sequence
- Combining with inView
- Combining with exit animations
9. Considerations and Gotchas
In this chapter I gathered a few topics that could cross your mind when working with Motion, as well as some important gotchas when using Motion with specific tools.
soon 🤩
9. Considerations and Gotchas
In this chapter I gathered a few topics that could cross your mind when working with Motion, as well as some important gotchas when using Motion with specific tools.
10. Motion's APIs
Some APIs are highly specific and would take too much out of the course's flow when discussed (in full) as part of a lesson. This module therefore combines any APIs that you might want to know more about, and gives you the guidance on where to find more information.
soon 🤩
10. Motion's APIs
Some APIs are highly specific and would take too much out of the course's flow when discussed (in full) as part of a lesson. This module therefore combines any APIs that you might want to know more about, and gives you the guidance on where to find more information.
Projects
Throughout the lessons, you've tackled many exercises that focused on individual topics and mastered all of Motion for React's APIs. Now, it's time to put your skills to the test.
This section is packed with exciting exercises that combine everything you've learned, helping you build truly amazing projects. Let's dive in!