Crafting Beautiful Experiences With Framer Motion
Making smooth, performant and beautiful animations is hard. Framer Motion helps you overcome a lot of these struggles. In this course, I'll guide you through everything of Framer Motion has to offer. Together, we take a look at all of Framer's API's, and craft impressive real-world projects.
Scroll down to disover what this course has to offer.
Framer Motion is one of the best libraries in the React ecosystem.Unmatched in any other framework.
It's perhaps one of the biggest reasons I'm still using React today.
But why?
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 Framer Motion do this any better than plain CSS?
Framer Motion packs some ✨ magic ✨, which they call Layout Animations. When using layout animations to resize an element in width / height, Framer 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 animation 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
className={classNames(
"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 fromflex-row to flex-row-reverse and vice versa, and from that point on Framer Motion takes over. You notice Framer Motion does a complicated transform animation to move the elements to the position where the new flex direction would put them. PLUS it animations it too. As soon as the elements are in the correct position, Framer removes all inline styles again, and the CSS takes over.
Exactly these things make Framer Motion so powerful!
In the course we'll dive into many more benefits of Framer 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 Framer 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 Framer Motion and when to stick with CSS.
Not even every animation on this page is using Framer 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 API's of Framer 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.
Framer Motion
Introduction
What is Framer 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.
Full course curriculum
Introduction
Who is this guy, what to expect from the course, and why would you even bother learning Framer Motion?
01Introduction
Welcome! In this video I'll introduce myself briefly, and we take a look together what to expect from the course.
02Framer vs Framer Motion
Isn't Framer a design tool? (Yes, but Framer Motion isn't).
03Comparing it to CSS Animations
CSS is super powerful, especially with all features being released lately. There are however a few things CSS isn't that good at yet. I think you should combine both tools, and use them for what they do best.
The first steps
I assume you have zero knowledge of Framer Motion, and take you by the hand creating your first animation and look at the animate prop together.
01Installing Framer Motion
If you're new-ish to frontend development, showing you how to install a package might be useful.
02The motion component
Most of Framer Motion's functionality is build around the Motion component. We take a look at it and it's capabilities.
03Creating your first animation: The animate prop
Once we have the motion component on the page, it's time to make that rectangle move!
04Changing the default transition
Framer Motion adds a transition by default, but taking control over the transition allows us to fine tune the experience just the way we like it.
05Make the animation loop: keyframes
Just like in CSS, Framer Motion also supports keyframe-like animations. Let's make that animation never stop.
06Hover and focus animations
Framer Motion gives us a few props out of the box, for adding animations to for example hover and focus states. This is still something you can do with CSS, however Framer Motion adds a few important extra details.
07Until this far: Is it really any better than CSS?
Barely. Perhaps not at all. Until this far, Framer Motion is fairly similar to CSS, it perhaps even adds overhead. Let's continue to the next section though.
08CODE 🧑💻 – Combine what we just learned
Gotcha's with specific tools
There's a few things that are good to know, when using Framer Motion with specific tools. Only watch them if you work wit these tools.
01Next.js App Directory
In Next's app directory, by default everything is server rendered. That means your animations won't work out of the box. In this video we take a look at how get your animations to work in Next.js' app directory.
02TailwindCSS
Tailwind does have a few gotcha's when you try to animate something that's also set with a classname. Mainly because they use a few CSS variables for their styles.
Dynamic animation values
All APIs we discussed before are powered by motion values. You can however also use them directly, unleashing even more powers.
01What are these motion values?
Motion values are used in all of Framer Motion's APIs. We can however also create our own values with the useMotionValue hook. Let's see what we can do with them.
02Transforming motion values on a scale
It's very common to combine the motion value with the useTransform hook. This allows us to transform a range from 0 - 1, to for example 0 - 100 pixels.
03Make it bounce: springs and velocity
Springs and velocity are two powerful animation concepts, that can add even more life to your animations.
04Animating CSS variables (custom properties)
Sometimes it's so much easier to animate a CSS variable, and then let CSS take it over from there. We take a look at a few situations when this can be useful.
05CODE 🧑💻 – Combine what we just learned
Scroll animations
Interactions make the animations come to life. We'll take a look at how scroll animations can add interactivity to pages.
01Animate when the element gets in the viewport
Peek-a-boo! Let's make the animation start when the element gets in the viewport.
02CODE 🧑💻 – Combine what we just learned
03Scroll animations
Taking the inview animation a bit further. Instead of a 'fire and forget' animation, we can also make the animation follow the scroll position.
04CODE 🧑💻 – Combine what we just learned
Layout animations
Part of the power of Framer Motion lies in the layout animations. Trust me, you'll love this!
01What are layout animations?
I told you to trust me.. Do you really want me to convince you? Fine.
02Making our first layout animation.
It's as easy as adding a single prop. But the magic behind the scenes is incredibly powerful.
03Shared layout animations
Animate one component into another. It's incredible how easy this is to add with Framer Motion, thinking about all the complexity they hide for us!
04CODE 🧑💻 – Combine what we just learned
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?
01Variants
Variants are the first step to creating more complex animations. It allows us to create a set of animations, and switch between them with a single prop. Switching variant on a parent, will also propagate to the children – we explore why this is very powerful.
02Creating sequences: using the useAnimate hook
What if your animations involve multiple steps, perhaps even happening after each other rather then at the same time. This is the next step up.
03CODE 🧑💻 – Combine what we just learned
How to make all of this responsive?
The web unfortunately isn't only one breakpoint. So what about responsive animations?
01Creating sequences: using the useAnimate hook
What if your animations involve multiple steps, perhaps even happening after each other rather then at the same time. This is the next step up.
02CODE 🧑💻 – Combine what we just learned
Important considerations
In this chapter I gathered a few topics that could cross your mind when working with Framer Motion.
01Accessibility
Accessibility is super important.
02Framer Motion's bundle size
How much does Framer Motion add to your bundle size?
03SEO: Do animations have any impact on my ranking in Google?
A few thoughts on animations and SEO.
Let's build something together
A whole chapter dedicated to building something together. This is gonna be fun!!
01I will start building these examples at the end of the course.
So stay tuned for the exact contents. You will love it though!! It won't be just one simple project.
Frequently asked questions
Let's start learning Framer Motion!
Sign up for PRO today, and receive an email as soon as the first parts release! The price will go up once that happens 😉