Animations on the web
2h 23m 59s
English
Paid
Course description
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.
Watch Online
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
Comments
0 commentsWant to join the conversation?
Sign in to commentSimilar courses
The Complete Junior to Senior Web Developer Roadmap (2023)
Sources: udemy
This is the tutorial you've been looking for to no longer be a junior developer, level up your skills, and earn a higher salary. This extensive course doesn’t j
37 hours 7 minutes 57 seconds
Whimsical Animations
Sources: Josh Comeau
Learn how to create enchanting interactions and amazing details using the magic of CSS, JavaScript, SVG, and Canvas. I will share all my...
5 hours 7 minutes 31 seconds
SolidJS: The Complete Guide
Sources: Sinan Polat
This book is the result of two years of meticulous work. SolidJS may seem simple at first glance, but its internal structure includes complex...