How do you craft animations that feel right?
Learn the theory and practice behind great animations with this interactive learning experience.
My profile picture, but without a face
Taught by Emil Kowalski
Coding animations is hard, and unfortunately, many tutorials follow a happy path. They cover simple animations that are great for beginners, but aren’t that helpful once you go past the basics.
But it’s not just the code that makes an animation work. A bad easing or duration can ruin an otherwise great animation. But how do you know whether you made the right choices? You don’t because animations are tricky. It just doesn’t feel right and you can’t tell why.
Hey, I’m Emil
I’m currently working as a design engineer at Linear. In the past, I’ve worked on the design team at Vercel where I developed the design system, dashboard, docs, and more.
I also created Sonner and Vaul, two open source React libraries that rely on animations. These packages are downloaded over 15,000,000 times per week from npm.
What you’ll get
- Starting with the 4 base modules all the way through walkthroughs, you’ll
- learn everything you need to know to build great animations on the web.
- Making it feel right
- We’ll dive deep into the theory behind great animations. We’ll talk about taste, spring animations, timing, purpose, and more. After this module, you’ll stop guessing.You’ll know exactly why an animation feels off, and how to make it better.
- CSS animations
- We’ll make sure that you get the basics of CSS animations right and know when and how to use them. This way you’ll be able to transition into Framer Motion with ease.
- You’ll learn about transforms, transitions, keyframe animations, and more. Not just the basic, but real-world examples and exercises that will actually help you.
- While this module involves a lot of coding, we will still talk about the theory. In the solution of exercises, I often talk about which easing and duration I chose and why. This is often times more important than the code itself.
- How do I use Framer Motion
- Framer Motion’s documentation often times follows a happy path. It covers simple animations, which are great for beginners, but don’t give you a lot of insight on how to craft more complex ones or what to do when something breaks.
- That’s why, in this part, we’ll build a lot. We’ll cover the basics, then quickly move to more complex animations like the Feedback popover below. We’ll run into issues and solve them, so that you’ll know what to do when you run into similar problems yourself.
- Good vs Great animations
- At this point in the course we know what differentiates a good animation from a bad one, and we know how to code them. In this module we’ll explore both the theory and practice on a deeper level.
- We’ll talk about how you can transfer feelings with animations, the importance of orchestration, accessibility, and more. After this module you’ll know how to take your animations from good to great.
- This is the second part of the course in which you’ll get to see how I create animations from scratch, including the reasons behind my decisions
- The difference between components we build here and the ones in previous modules is that here, I show you my exact thought process. We’ll start by just thinking and talking about the animation we want to make, then move to the code, improve it and iterate.