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
UI Architecture Academy. Q&A Calls
Sources: Logic Room
A series of group coaching sessions, guidance from a coach, answers to questions, and support throughout the course "Academy of UI Architecture."
20 hours 50 minutes 44 seconds
Normal UI
Sources: Anthony Alicea
You don't need to be a designer to make a web application more user-friendly. Successful web applications are user-friendly web applications. The better...
39 minutes 16 seconds
UI Architecture Academy
Sources: Logic Room
"Academy of UI Architecture" is a 12-module program that will teach you how to develop, test, and scale user interfaces. During the course, students undergo...
21 hours 37 minutes 23 seconds
Web Components Demystified
Sources: Scott Jehl
If you are like me, then you have probably been hearing a lot about web components lately. Many of us are looking for ways to integrate web components into...
7 hours 51 minutes 36 seconds