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

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 42 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

Watch Online Animations on the web

0:00
/
#1: Intro

All Course Lessons (42)

#Lesson TitleDurationAccess
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 subscription

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 comments

Want to join the conversation?

Sign in to comment

Similar courses

Advanced FrontEnds

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

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

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

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