How do you craft animations
that feel right?
The interactive learning experience that teaches you how to build animations on the web. The right way.
Coming soon
This course is under active development. The reviews you see here are from the early access period. The course will launch on September 9th, 9AM ET.
You can subscribe to receive periodic updates about this course! I send behind-the-scenes updates every few weeks.
Animations are hard
There are so many ingredients that go into them. You need to choose the right easing, duration, whether it should animate at all, you also need to think about performance, accessibility, and so much more...
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.
Imagine you knew exactly how to build them
Imagine people falling in love with your work or product through animations. Imagine they would react to your work like Theo did to one of my animations:
Knowing what animation choices to make and why is game-changing. It'll make your work stand out from the crowd. You'll become confident in your choices and you won't just guess what might work.
You can learn it all
Animations on the web is an interactive learning experience that teaches you the theory behind great animations, and how to actually implement them in practice using Framer Motion, and, in some cases, CSS.
There are tons of interactive examples, exercises, videos where I explain things, and more. All on a custom-built platform to make the learning experience as smooth as possible for you. This course contains everything I know about animations on the web.
“Just bought @emilkowalski_ course and couldn't be more happy.
The intro chapter just changed my mental model on animations. Worth every cent.”
Hey, I'm Emil
I work as a design engineer at Clerk where I build all kinds of UIs. Previously, I developed the design system, dashboard, and marketing pages at Vercel.
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,000,000 times per week from NPM.
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.
“If you're looking to up your UI game, this is it.
@emilkowalski_ has done it once, twice, many times.”
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.
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 much 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. 👌🏼”
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.
The Oddysey
Explore unknown galaxies.
Angry Rabbits
They are coming for you.
Ghost town
Scarry ghosts.
Pirates in the jungle
Find the treasure.
Lost in the mountains
Be careful.
It cointains a lot of Framer Motion right now, but the plan is to cover vanilla CSS animations in the future as well.
“I’ve only just started diving in, but holy shit! This course is genuinely superb, and Emil is the first person I’ve seen that *properly* explains how to use Framer Motion”
Good vs Great animations
At this point in the course we know what differentiates a great animation from a bad one, and we know how to code them. In this module we'll explore both the theory and the practice on a deeper level.
We'll talk about how you can transfer feelings with animations, the importance of orchestration, accessibility, and more. There's also a lesson on animations of the future, in which we talk about the trash animation below, and much more.
“Emil consistently creates the highest quality animations on the web.
His course is a must-have for anyone looking to craft world-class interfaces.”
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.
You can see the components we will build below. You'll get the source code, and more walkthroughs will be added over time based on the suggestions in the Discord community.
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 has really helped me better understand how to make some really great animations”
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:
Henry HeffernanDesign Engineer at Vercel
Mariana CastilhoProduct Designer at Vercel
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.
Coming soon
This course is under active development. The reviews you see here are from the early access period. The course will launch on September 9th, 9AM ET.
You can subscribe to receive periodic updates about this course! I send behind-the-scenes updates every few weeks.
“"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.”
