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, and many more.
Animations on the web
2h 23m 59s
English
Paid
Animations on the web is a 42-lesson 2 hours 23 minutes self-paced course by Emil Kowalski. Learn how to craft animations that make people feel something .
Course facts
- Lessons
- 42
- Duration
- 2 hours 23 minutes
- Level
- All levels
- Language
- English
- Updated
- Instructor
- Emil Kowalski
- Price
- Premium
Additional
The course is in production. New chapters will appear as they are released.
Who teaches Animations on the web? Emil Kowalski
Emil Kowalski is a Polish front-end engineer best known for his work on production-grade animations for the web — including the open-source vaul drawer component, sonner toast library, and cmdk command palette, all of which have spread broadly across the React ecosystem. He has worked at Vercel and Linear and writes / speaks on the craft of UI animation.
His CourseFlix listing carries Animations on the web — a course on the engineering side of motion design: how to use Framer Motion / motion.dev, the CSS primitives that underlie smooth animation, performance considerations, and the design judgment around when motion helps versus hurts the interface.
What lessons are included in Animations on the web?
0:00
/ #1: Intro
All Course Lessons (42)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | Intro Demo | 03:11 | |
| 2 | What makes an animation feel right? | 03:53 | |
| 3 | The Easing Blueprint | 04:41 | |
| 4 | Spring animations | 05:57 | |
| 5 | Timing and purpose | 05:29 | |
| 6 | The magical ingredient. | 03:25 | |
| 7 | The beauty of CSS animations | 02:44 | |
| 8 | Transforms Solution | 01:19 | |
| 9 | Transitions Solution 1 | 01:08 | |
| 10 | Transitions Solution 2 | 02:34 | |
| 11 | Transitions Solution 3 | 02:08 | |
| 12 | Transitions Solution 4 | 03:13 | |
| 13 | Keyframe animations Solution 1 | 02:02 | |
| 14 | Keyframe animations Solution 2 | 02:32 | |
| 15 | Why Framer motion | 06:06 | |
| 16 | How do i code animations | 00:25 | |
| 17 | How do i code animations - more 1 | 02:27 | |
| 18 | How do i code animations - more 2 | 04:33 | |
| 19 | How do i code animations - more 3 | 03:22 | |
| 20 | How do i code animations - more 4 | 02:46 | |
| 21 | Feedback popover | 01:36 | |
| 22 | Feedback popover - more 1 | 02:25 | |
| 23 | Feedback popover - more 2 | 02:05 | |
| 24 | Multi-step component | 01:13 | |
| 25 | Multi-step component - more 1 | 02:05 | |
| 26 | Multi-step component - more 2 | 01:13 | |
| 27 | Multi-step component - more 3 | 03:22 | |
| 28 | Trash interaction | 09:45 | |
| 29 | Animating in Public | 01:13 | |
| 30 | The big little details | 03:37 | |
| 31 | Animations of the future | 03:15 | |
| 32 | [Family Drawer] The Analysis | 02:53 | |
| 33 | [Family Drawer] First animations | 01:30 | |
| 34 | [Family Drawer] First animations - more 1 | 01:31 | |
| 35 | [Family Drawer] First animations - more 2 | 01:40 | |
| 36 | [Family Drawer] Crossfade | 02:02 | |
| 37 | [Family Drawer] Crossfade - more 1 | 01:46 | |
| 38 | [Family Drawer] The finishing touch - Solution | 02:46 | |
| 39 | [Dynamic Island] The Design | 02:54 | |
| 40 | [Dynamic Island] Ring view | 05:22 | |
| 41 | [Dynamic Island] Timer view | 02:45 | |
| 42 | Dynamic Island] Morph effect | 04:28 |
Unlock unlimited learning
Get instant access to all 41 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionAudio tracks
Audio Playlist
1. Henry Heffernan (Design Engineer)
Duration: 00:39:12
2. Mariana Castilho (Product Designer)
Duration: 00:44:44
3. Lochie Axen (Design Engineer)
Duration: 01:00:03
What courses are similar to Animations on the web?
-
Updated 2y agoScrollTrigger Express
By: Creative Coding ClubScrollTrigger is the most revolutionary GreenSock plugin to date. With it, you can control all your animations with the precision and performance.10h 31m -
Updated 3y agoCreating a simple portfolio website with WebGL and Barba.js
By: AwwwardsNothing beats smooth user experience. That is the reason we love WebGL, because we can do crazy effects with amazing performance. But if you combine that with s3h 41m -
Updated 2y agoFramer Motion Recipes
By: Build UIFramer Motion is a popular React animation library. It features both declarative and imperative APIs.3h 8m -
Updated 2y agoGSAP3: Beyond the Basics
By: Creative Coding ClubReady to take your GSAP3 skills to the next level? In this course, I'll show you my favorite GSAP3 features that you absolutely need to know to discover new.8h 25m -
ClassicAnimating the web with Framer Motion
By: Jeroen ReumkensMaking smooth, performant and beautiful animations is hard. Framer Motion helps you overcome a lot of these struggles. In this course, I'll guide you through ev6h 3m5/5 -
Updated 11mo agoWeb Animations Full Course | Build a GTA VI Website & Master GSAP
By: JavaScript Mastery, Adrian HajdinMore than 70% of leading design-oriented companies use GSAP in production. Now you will not only be able to understand their approach, but you will.3h 31m -
Updated 2y agoSVG Animation with GreenSock
By: Creative Coding ClubLearn how to create SVGs in design programs, embed them in web pages, edit them using code, and animate them with GreenSock.12h 34m -
Updated 2mo agoRive: Interactive Motion
By: Motion Design SchoolMaster Rive to create interactive UI elements, animations for the web and games. Learn about working with bones, exporting, and integration with Unity.26h 41m
Frequently asked questions
What prerequisites are needed before taking this course?
The course is designed for individuals who are interested in web animations. While the course does not explicitly list prerequisites, a basic understanding of web technologies such as HTML, CSS, and JavaScript will be beneficial. Familiarity with animation concepts will also help, although the course covers foundational topics like 'The Easing Blueprint' and 'The beauty of CSS animations'.
What projects or components will I build in this course?
Throughout the course, you'll work on building various components and interactions. These include 'Feedback popover', 'Multi-step component', 'Trash interaction', and the 'Family Drawer' animations. The course also covers creating animations for a 'Dynamic Island' feature, focusing on elements like the 'Ring view' and 'Timer view'.
Who is the target audience for this course?
The course is aimed at individuals who appreciate Emil Kowalski's style of animations and anyone looking to enhance their web animation skills. It suits both beginners and those with some experience in animations, as it covers a wide range of topics from basic principles to advanced techniques.
What specific tools or platforms will be covered?
The course covers the use of CSS for animations, specifically through lessons on CSS animations and transitions. Additionally, it discusses the 'Framer motion', a popular library for creating animations in React applications. These tools are integral to creating the animations discussed in the course.
What topics are not covered in this course?
The course focuses on web animations and does not cover animations for other platforms like mobile apps or desktop software. It also does not delve into 3D animations or advanced graphics programming. The focus remains on practical, web-based animation techniques.
How much time will I need to complete this course?
While the course consists of 42 lessons, the total runtime is not specified. However, prospective students should expect to spend several hours on lessons and practice exercises, especially if they're new to some of the concepts. The time commitment will vary based on individual learning speeds and prior experience.
How can the skills learned in this course benefit my career?
The skills gained from this course can significantly enhance your capabilities in front-end web development. Understanding how to create engaging animations can improve user experience and interface design. These skills are valuable in various roles, including web development, UI/UX design, and interactive media design.