Login

How do you craft animations
that feel right?

The interactive learning experience that teaches you how to build animations
on the web.

My profile picture, but without a face
Taught by Emil Kowalski

Registration is closed

3,829 designers and engineers have purchased the course in 2024. The registration will reopen on Tuesday, January 14th for 10 days. You can sign up for the waitlist to receive behind-the-scenes content every 2 weeks. No spam, no nonsense.

Coding animations is challenging and, unfortunately, many tutorials follow a happy path. They cover simple animations, which are great for beginners, but don't give you a lot of insight on how to craft more complex ones.

But it’s not just the code that makes an animation work. You need to have a sense of what feels right and what doesn’t. You might have a great animation in your head, but when you code it, it just doesn't feel right and you can't tell why.

What if you could understand why an animation feels off?

It's hard to know where to start, and it's even harder to know if you're making the right choices. But animations are becoming an increasingly important part of the web. They improve the experience, and that benefits all areas of your work.

If you could look at an animation and truly see what's wrong, and how to fix it, whether it's an easing, or a timing issue. You would be able to craft animations that delight your users. You could have them literally take videos of your work to show it off.

Theo's reaction to my toast library called Sonner.

An interactive learning experience that teaches you the theory and the practice behind great animations

Animations on the web is a course that teaches you the theory behind great animations, and how to implement them in practice using CSS animations and Framer Motion.

Screenshot of the course platform showing a video player in the center, course chapters listed on the left, and a nchors to headings on the right sidebar. The selected chapter is ‘Spring animations’ under ‘Making it feel right,’ with the video at 0:49 of 5:46.

You'll get a set of custom easings that I use in my work, we'll talk about taste, perception of speed, spring animations, timing, purpose of an animation, and much more. You'll become confident in your choices and you won't just guess what might work.

We'll also build a lot. Not only the trivial examples covered in every tutorial, but also more complex animations like the Family Drawer below. We'll run into issues and solve them, so that you know what to do when you run into similar problems yourself.

If you're looking to up your UI game, this is it.
@emilkowalski_ has done it once, twice, many times.

shadcn's profile picture
shadcnCreator of shadcn/ui

Hey, I'm Emil

I'm currently working as a design engineer at Linear. In the past, I've worked at Vercel where I developed the design system, dashboard, and marketing pages.

I'm also the creator of Sonner and Vaul, two open source libraries for React that rely heavily on animations. These packages combined are downloaded over 1,700,000 times per week from NPM, and are used in other libraries like shadcn/ui.

Sonner

A toast component for React.

Vaul

A drawer component for React .

I see animations on the web as a form of art, and care deeply about how they look, feel, and behave. I want people to have a moment of delight when they use the things I create.

Just bought @emilkowalski_ course and couldn't be more happy.The intro chapter just changed my mental model on animations.
Worth every cent.

George's profile picture
GeorgeEngineer

The Curriculum

This course is split into three modules and a series of walkthroughs. It teaches you everything you need to know to build great animations on the web.

Module 1

Making it feel right

In this module we'll dive deep into the theory behind great animations. You'll get a set of custom easings that I use in my work, we'll talk about taste, perception of speed, spring animations, timing, purpose of an animation, and more. After this module, you'll be able to articulate why an animation feels right or wrong.

Purchased this course and tbh I just love the theory so much. Articulated clearly and opinionated in all the right places.

Matt Litherland's profile picture
Matt LitherlandDesign Engineer, Dealflow
Module 2

Coding animations

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.

That's why, in this part, we'll build a lot. We'll cover the basics, but we'll quickly transition into building more complex animations like the Feedback popover below. We'll run into issues and solve them, so that you know what to do when you run into similar problems yourself.

This chapter teaches you how to code animations, but it also gives you an insight into how I think about animations. For example in the solutions for exercises I often talk about a transition that I then later change to a different one while explaining why I did that.

I’ve only just started diving in, but holy shit! This course is genuinely superb. Emil is the first person I’ve seen that *properly* explains how to use Framer Motion. Worth the money any day!

Charlie Joseph's profile picture
Charlie JosephEngineer, Gamertag
Module 3

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.

Game

The Oddysey

Explore unknown galaxies.

Game

Angry Rabbits

They are coming for you.

Game

Ghost town

Scarry ghosts.

Game

Pirates in the jungle

Find the treasure.

Game

Lost in the mountains

Be careful.

Emil consistently creates the highest quality animations on the web. His course is a must-have for anyone looking to craft world-class interfaces.

Benji Taylor's profile picture
Benji TaylorFounder, Family

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 other 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.

Family's drawer

We'll build a drawer for mobile devices used in the Family's iOS app.

Visual components by Family.
For educational purposes only.

Dynamic Island

The main focus here will be on easing and the smoothness of the animation.

Love the course content so far. I had a reasonable understanding of the Framer Motion basics, but Emil's demos and code examples have really helped me better understand how to make some really great animations

Matt Rintoul's profile picture
Matt RintoulDesign and Engineer, SayYeah!

Bonus features

After purchasing this course you'll also get access to some extra content.

A series of interviews with great designers and engineers in which we talk about animations, engineering, design, and more. Currently, there are two interviews available.

  1. Profile picture of Henry
    Henry HeffernanDesign Engineer at Vercel

    This interview is about design engineering at Vercel, how Henry thinks about easings, taste, and more.

  2. Profile picture of Mariana
    Mariana CastilhoProduct Designer at Pierre

    We talk about how Mariana learned to code as a designer, how she got hired at Vercel, where she gets inspiration from, and more.

And a vault, which is a selection of useful videos, articles, and other resources that will help you get even better at animations. There are also links to some of my favorite designers and engineers to inspire you.

Screenshot of the Vaul, showing 6 links.

Super great course, only wish I had done it myself.
10/10 would recommend so far.

Josh Ellis's profile picture
Josh EllisCo-author of react-spring

Registration is closed

3,829 designers and engineers have purchased the course in 2024. The registration will reopen on Tuesday, January 14th for 10 days. You can sign up for the waitlist to receive behind-the-scenes content every 2 weeks. No spam, no nonsense.

"How do I code animations" is pound for pound the best course section I've ever engaged with. It involves so much Framer Motion goodness and unlocks so much. That section alone can take you so far in your animation journey.

Timothy Ogbemudia's profile picture
Timothy OgbemudiaWeb Engineer

FAQ