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
Full-Stack Fundamentals 2 - Backend
Sources: Mckay Wrigley (takeoff)
In the first project, we focused on the frontend, creating a personal portfolio website. Now we will take the next step towards full-stack development...
1 hour 45 minutes 49 seconds
Frontend architecture and patterns bootcamp
Sources: udemy
This comprehensive course covers a wide range of software architecture topics, including component-oriented patterns, Single Page Application (SPA)...
4 hours 21 minutes 43 seconds
Build a Full Stack Blog with Astro
Sources: egghead
Master the creation of a fully-featured blog on Astro. Learn to style pages, work with components, integrate the backend, and apply SEO optimization...
2 hours 43 minutes 16 seconds
Build Responsive Real World Websites with HTML5 and CSS3
Sources: udemy
The easiest way to learn modern web design, HTML5 and CSS3 step-by-step from scratch. Design AND code a huge project.
37 hours 28 minutes 39 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...