Crafting beautifulOooohOooohAaaaahAaaaahexperiences with Motion for React(formerly Framer Motion)
Taught by Jeroen ReumkensFounder of Frontend.fyi
Making smooth, performant and beautiful animations is hard. Motion for React helps you overcome a lot of these struggles.
In this course, I'll guide you through everything Motion has to offer. Together, we take a look at all of Motion's APIs, and craft impressive real-world projects.
Despite plain CSS getting more powerful every week, with amazing features like scroll driven animations , and view transitions , it still has its limitations. One of the biggest limitations is that you shouldn't animate all properties of an element. For example animating properties like width, height, top, or left, could cause janky animations. It is best practice to manipulate an elements size and position by animation properties like translateX/Y and scale.
But why would Motion do this any better than plain CSS?
Motion for React packs some ✨ magic ✨, which they call Layout Animations. When using layout animations to resize an element in width / height, Motion uses calculations under the hood, to convert this resize into a scale and transform animation 🤯. This results in animations that always perform significantly better than plain CSS animations — almost without needing to think about this!
It doesn't only do this for width/height though!
However, this magic doesn't stop at performant animations for width and
height! Framer is even capable of animating really complex layouts from
one into another. For example, animating two elements from flex-direction: row into row-reverse. Take a
look at the magic in action below!
<div class={twMerge( "flex justify-center gap-4 py-5", direction === "row" ? "flex-row" : "flex-row-reverse" )}> <motion.div layout>I'm left</motion.div> <motion.div layout>You sure about that? 🤔</motion.div></div>
The code above is really the only thing you have to do for this magic.
Switch some class around that updates the flex direction, and make sure
that the elements you want to animate are a motion.*
component that both have the layout property. That's it!
If you inspect the animation above, you see the class changes from
flex-row to flex-row-reverse and vice versa, and
from that point on Motion takes over. You notice Motion does a complicated
transform animation to move the elements to the position where the new flex
direction would put them. PLUS it animates it too. As soon as the elements
are in the correct position, Motion removes all inline styles again, and the
CSS takes over.
Exactly these things make Motion for React so powerful!
In the course we'll dive into many more benefits of Motion. For example their amazing animation timelines for creating complicated multi step animations — a relative new API that enables us to create powerful multistep animations like we did in our Amie.so rebuild . We'll also dive deeper into how Motion compares to plain CSS animations, and things like the scroll driven animations.
"So... You are one of these people building all your animations in JavaScript!!"
I'm a big proponent of using every tool for what it does best. And you know what, CSS is getting even better by the week! I will teach you the right balance, and to judge when to use Motion and when to stick with CSS.
Not even every animation on this page is using Motion. Why would I if CSS does the job just as well, and perhaps even better?
Course contents
So what DO I teach in this course? In this course we start with taking a look at the basic APIs of Motion. These API's are the building blocks of all the animations we'll create in this course. The further you get into the course, the more we combine these API's to create real world examples together.
Motion for React
Introduction
What is Motion, and how does it compare to CSS Animations. When should you use what?
2
3
<motion.div> <h1>Hello World</h1></motion.div>
Your first animation
We start with the basics first. They are the foundation you need to create the most stunning animations.
Different types of animations
Keyframe animations, scroll animations, layout animations (the real power!!), and so much more.
responsive
Make your animations work on all devices.
Accessibility
A topic that's very important on the web in general. The same goes for animations. We discuss the implications animations could have on accessibility, and how we can solve them.
Projects!
We build multiple real world projects together,
strengthening our new skills.
But why would you want to add these annoying useful animations to your
site?
Using animations the right way, enables your user to 'think less', and enrich the experience by adding charm and personality to a UI. Let's dive into these benefits a bit more, and take a look at a few examples.
Motion delights users
Making people smile when using my products, is the number one reason why I enjoy frontend so much. Small unexpected details, turn a boring task into a memorable experience. Keeping this in the back of your mind when building your products, will help you build experiences that stand out.
Still, we often neglect the importance of adding a touch of fun to the web. It usually ends up on the backburner, saved for last-minute fixes when we're already way past our deadlines.
But keep in mind, it's all about balance. Don't go overboard with the fun factor, as that could ultimately harm the end product.
Add a bit of fun
Not every website is a good fit to add some confetti. Today is the day though — you've already read quite a bit. Which means it's time to celebrate this with some poppers. Can you find the easter eggs? Don't forget to turn on your sound too! 😉
Animations grab attention
Motion is able to grab attention, highlight important elements or actions happening in the UI, and focus on key UI elements on the page. Without creating unneccesary distractions.
zYou are on Do Not Disturb
Do you want to update your status?
Mom
Missed Call
Work
Missed Call
Work
Missed Call
Mom
Missed Call
Mom
Missed Call
Animations make connections clear
Using animations makes it possible to show the relationship between two elements.
Motion is a profession on its own
As frontend developers, we don't have to be the sole creators of every fancy animation. Coming up with satisfying and consistent animations, takes a lot of skill and effort. However, we should be familiar with the available options and understand the potential consequences of the animations we incorporate. This way we're able to collaborate with (motion) designers on crafting the best animations for our products.
Explore the full curriculum
Make sure to check out the full course curriculum. It also contains some free lessons for you to get even more excited!
Frequently asked questions
Let's start learning Motion for React!
This course is included in Frontend.FYI PRO.
A one-time purchase of €249 gives you access to all
pro courses and paid tutorials. Including future releases.