Animations on the web

A video-based course by Emil Kowalski

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.

01 — Fundamentals

Split into 3 parts: making it feel right, how I use framer motion, the big little details. 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?
  1. 01. What makes an animation feel right?
  2. 02. The easing blueprint
  3. 03. Spring animations
  4. 04. Timing and purpose
  5. 05. Taste
How I use Framer Motion 30.04.2024I'll show you how I animate things with Framer Motion and how to get the most out of it.
  1. 01. Why Framer Motion?
  2. 02. How do I code animations?
  3. 03. App Store-like transitions
  4. 04. Amie's split-screen
The big little details 31.05.2024This section is all about polishing your animations and making them feel delightful.
  1. 01. Performance
  2. 02. Accessibility
  3. 03. Orchestration
  4. 04. Crafting for delight

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.

Emil’s work blends design, motion and incredible attention to the little things. I’m looking forward to his course. Preordered!

Preorder

You can preorder the course at a discounted price (40% off) until Friday, March 15th. That's also the date that the first part will launch. After that, you won't be able to purchase the course until the final release, at which point the price will be 200$.

Unsure whether this course is right for you? You can read the FAQ.

Purchase 119$ 199$