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
Join premium to watch
Go to premium
| # | Title | Duration |
|---|---|---|
| 1 | Intro | 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 |
Audio 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 commentsSimilar courses
B-Sides, Bonuses and Oddities
Sources: Carl (Creative Coding Club)
After completing the basics of GreenSock in the "Express" and "Beyond the Basics" courses, we will now apply the acquired knowledge in practice, sometimes...
17 hours 55 minutes 38 seconds
The Ultimate Web Scraping Course
Sources: Adrian Horning (The Web Scraping Guy)
I have been earning a living through web scraping for over 3 years, have made over $125,000, have more than 25,000 followers on social media, and in this...
10 hours 33 minutes 19 seconds
Learn Astro
Sources: Chris Pennington
In a world of overly complex web frameworks, Astro stands out for its simplicity, excellent developer experience, and high performance. But behind this...
17 hours 12 minutes 58 seconds
Web Performance Fundamentals
Sources: Nadia Makarevich
"The Fundamentals of Web Performance" focuses on the key aspects of improving the speed and responsiveness of web applications in the context of React...
Clean Code: Writing Code for Humans
Sources: pluralsight
Anyone can write code a computer can understand, but professional developers write code *humans* can understand. Clean code is a reader-focused development styl
3 hours 10 minutes 36 seconds
Want to join the conversation?
Sign in to comment