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
Watch Online Animations on the web
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 commentsSimilar courses

Advanced FrontEnds
Sources: Gary Simon
"Advanced FrontEnds" is a comprehensive course by Gary Simon, focusing on creating highly animated, interactive landing pages. It covers JavaScript, GSAP, and Three.js, with a p...
8 hours 58 minutes 38 seconds

Building Full-Stack Apps with AI
Sources: Mckay Wrigley (takeoff)
The course "Building Full-Stack Apps with AI" teaches how to create comprehensive applications using artificial intelligence, suitable for both beginners and...
8 hours 3 minutes 16 seconds

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

ScrollTrigger Express
Sources: Carl (Creative Coding Club)
ScrollTrigger is GreenSock's most revolutionary plugin to date. With its help, you can control all your animations with precision and...
10 hours 31 minutes 38 seconds
Want to join the conversation?
Sign in to comment