How do you craft animations that feel right?

Learn the theory and practice behind great animations with this interactive learning experience.

Coding great animations is hard.

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.

Can you clearly explain why the animation on the right feels better?

What if you knew exactly how to craft great animations?

If you knew what a great animation consists of, you would know which easing to use, what the duration should be, what properties to animate to keep it performant.

You could stop guessing, “Does this easing work?” or “Is this enter transition too long?”, because you would know you chose the right ingredients .

And most importantly, you would be able to craft animations that your users love.

A skill in short supply, but heavy demand.

The interactive learning experience where you’ll learn
the theory and practice behind great animations

animations.dev is a course where you’ll learn how to choose the right easing and timing, how to improve your taste, what spring animations are, and so much more.

You’ll finally be confident in your choices instead of guessing what might work.

All of that on a custom-built platform tailored to this course.

After learning the theory we’ll put it into practice.

We’ll build a lot, and there will be tons of exercises as that’s how you learn the most. After these lessons, you will know exactly how to code great and performant animations using CSS Animations and Framer Motion.

What you’ll learn

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.

Module 1

We’ll dive deep into the theory behind great animations in 8 lessons. We’ll talk about easing, spring animations, timing, purpose, taste, and more.

This module will teach you why an animation feels off, and how to make it better.

Each theory lesson is full of interactive examples like the one below, because I really want you to “touch” and experience the animations yourself.

After this module, you’ll know:

• Why some animations feel better than others.
• How to choose the right easing and duration.
• When to use spring animations.
• When you shouldn’t animate.

You’ll also get a set of custom easing curves that I use in my work and a bunch of other resources like a SKILL.md file with animation guidelines.

It can review your animations, suggest improvements, and basically answer all your motion-related questions based on my experience gathered over the years.

You’ll get a SKILL.md file that you can use with coding agents to help you write better animations.    

Module 2

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.

One of the animations we’ll build. Click on the button to see it animate.

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.

Module 3

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.

This component consists of 3 separate exercises.

Module 4

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, performance, and more. After this module you’ll know how to take your animations from good to great.

Walkthroughs

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.

There are 4 walkthroughs in total, Family Drawer, Dynamic Island, Navigation Menu and SVG Animations (illustration on top of this page). Combined, they consist of 15 lessons.