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
Frontend System Design
Sources: LearnersBucket | Prashant Yadav
Become the Alpha frontend engineer by designing 30+ distinct web applications and all the fundamentals. Learn the advanced concepts, strategies, techniques, and
Build & Test Accessible Web Apps | Testing Accessibility (PRO)
Sources: Marcy Sutton
Comprehensive Accessibility Training for Creating High-Quality Web Applications A self-paced course designed to teach the principles and effective...
16 hours 30 minutes 59 seconds
Web Security Dev Academy - 12-week online program
Sources: Bartosz Pietrucha
Master the full picture of web security and learn to develop secure full-stack applications with reliable authentication, protection against vulnerabilities...
16 hours 37 minutes 20 seconds