Animations on the web

A video-based course by Emil Kowalski

Registration is currently closed and will re-open for 5 days on Monday, June 17th, 9AM EST. You can sign up for the waitlist below to get notified. This will also give you access to future behind-the-scenes updates about the course.

Learn how to craft animations that make people feel something. It's for those that like my style of animations and/or anyone aspiring to improve their skills. This course contains everything I know about motion on the web. You'll learn how to build components like these two below, and more.

Sonner

An opinionated toast component for React that people love.

Vaul

A drawer component for React, made to bring the native feel to the web.

“Emil consistently creates the highest quality animations on the web. His course is indispensable for anyone looking to craft world-class interfaces.”

Benji Taylor

Founder, Family

01 — Fundamentals

Split into 3 parts: making it feel right, how I use framer motion, good vs great animations. Additionally, I’ll give you some resources that I use when working with motion, a blueprint of sorts. Keep in mind that the parts are not finalized yet and might change.

Making it feel right 15.03.2024Why do some animations feel better than others? What actually makes the difference?

01. What makes an animation feel right?
02. The easing blueprint
03. Spring animations
04. Timing and purpose
05. Taste

How I use Framer Motion 29.04.2024I'll show you how I animate things with Framer Motion and how to get the most out of it.

01. Why Framer Motion?
02. How do I code animations?
03. Feedback popover
04. Multi-step component
05. Trash interaction
06. Animating in public

Good vs Great animations 31.05.2024Going the extra mile to make your animations feel and behave even better.

01. Performance
02. Accessibility
03. Orchestration
04. Delight

“Emil’s approach to animations.dev goes beyond just teaching animation techniques; he delves into the essence behind the visual appeal. We quickly acquired team licenses for our product engineers and have since elevated our work on Mobbin.com with newfound understanding.”

Jovin Liew

Co-founder, Mobbin

02 — Walkthroughs

You’ll get to see how I create animations from scratch, including the reasons behind my decisions. I’ll show you the tricks I use, and how I tackle the challenges I face. Source code will be included, and more walkthroughs will be added over time.

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.

Author

I’m Emil, a design engineer working at Vercel, and creator of two open source libraries called Sonner and Vaul. 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.

“This course is really good. The pace, production quality, the way Emil explains things. Highly recommended.”

shadcn

Creator of shadcn/ui

Registration is closed

The registration will re-open for 5 days on Monday, June 17th, 9AM EST.

You can subscribe to receive a notification when the course is available. By doing so, you’ll also receive periodic behind-the-scenes updates about this course.

“It’s a course for all of those who want to master the nuances of great animations. As a software designer who loves to code, it helped dramatically improve my critical eye for interactions on the web.”

Mariana Castilho

Designer, Vercel