Buy PRO for €149
Course included in Frontend.fyi PRO (no subscription!)
Crafting Beautiful Experiences With Framer Motion
Taught by Jeroen ReumkensFounder of Frontend.fyi
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 Framer Motion has to offer. Together, we take a look at all of Framer's API's, 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 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 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 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 animates 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.
You 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 Framer Motion!
This course is included in Frontend.FYI PRO.
A one-time purchase of €149.99 gives you access to
all pro courses and paid tutorials. Including future releases.