Modern Web Animations (Learn Modern Animation Techniques with Browser APIs)

Greetings to readers of Modern Web Animations, the blog on advanced animation practices using only what the browser APIs offer. In this course, we use Web Animations API or WAAPI, which is an API that lets developers build and manipulate animations through JavaScript code. Thus, we can achieve top-notch performance and accuracy in web animations beyond any third-party libraries using this API.

Furthermore, in ‘Modern Web Animations,’ we look at CSS animations as the new addition of features set to completely change how we control animations. Starting with the concepts of properties such as animateTimeline, scrollTimeline, and viewTimeline, we move beyond the time-based animation and create constraints based on scroll progress and viewport visibility. These improvements allow developers to develop beautiful, simple-to-produce scroll-based animations without depending on third-party tools.

Furthermore, it explores the View Transitions API to enable further the easier creation of transitions between the occurring DOM states. Proving particularly beneficial for single-page application (SPA’s) this API helps to achieve smooth transitions throughout the application when switching from one page to another. That is why, within the frameworks of the course “Modern Web Animations,” we studied the material and its peculiarity and received the practical experience necessary to perform both in the sphere of modern and traditional Web animation.

Modern Web Animations Table of Contents:

1. Setting up our project folder (02:34)
2. Introduction to CSS Transitions (06:15)
3. Using CSS Transition with JavaScript (11:22)
4. Using JavaScript Transition Events (06:44)
5. Transition Behavior & Discrete Animations (08:58)
6. Animating an Element from display: none to display: block (08:09)
7. Using @starting-style rule (06:08)
8. More on @starting-style (08:17)
9. Timing Functions Boilerplate Code (05:54)
10. Linear Timing Functions (05:04)
11. Smooth Animations with Cubic Bezier Timing Functions (18:02)
12. Animating in Jumps Using the Steps Timing Function (07:49)
13. Introduction to CSS Animations (20:31)
14. CSS Animations Properties (05:49)
15. Adding Multiple Animations (07:24)
16. Animation Composition (06:07)
17. Animation Fill Mode (19:15)
18. More on the @keyframe at-rule (09:30)
19. Animations JavaScript Events (08:57)
20. Discrete Animations (04:48)
21. Animations Exercise (Part 1) (09:22)
22. Animations Exercise (Part 2) (07:11)
23. Animations Exercise (Part 3) (10:21)
24. Animations Exercise (Part 4) (09:47)
25. Introduction to the Web Animations API (07:18)
26. Timeline, Animation Objects & Animation Effects (06:29)
27. Creating our First Animation Using the Web Animations API (06:36)
28. Another Way for Defining Keyframes (15:32)
29. Quick Note! (10:23)
30. Iteration Composite (00:13)
31. Controlling Our Animation with Animation Object Methods (05:13)
32. Updating Our Animation Effect (Keyframe Effect) (10:14)
33. Getting Information About Our Animations (09:31)
34. More on the currentTime Property (11:50)
35. More on the startTime Property (08:30)
36. Animation Pending State & Ready Promise (07:08)
37. Finished Promise, Finish and Cancel Events (11:22)
38. Getting All Animations in the Document or an Element (03:59)
39. Persisting Filling Animations Styles with commitStyles (10:04)
40. Automatic Animations Removal By Browsers (07:26)
41. WEB ANIMATION API Exercise overview (10:27)
42. Exercise: Animating the Character (02:19)
43. Animating the Street, Background and Foreground (13:17)
44. Pausing the Entire Scene (05:37)
45. Speeding Up And Slowing Down Our Character (03:36)
46. Adding and Animating a Shadow to Our Character (05:01)
47. Adding a Random Car to the Scene (05:18)
48. Randomizing Our Car's Speed & Occurrence (09:43)
49. Animating the Car Wheels (09:19)
50. Introduction to Scroll-Based Animations (06:35)
51. Named Scroll Progress Timelines (11:06)
52. Anonymous Scroll Progress Timelines (07:00)
53. Customizing the Animation Range (05:08)
54. Timeline Scope (08:32)
55. Named View Progress Timelines (11:07)
56. View Timeline Inset (09:46)
57. Anonymous View Progress Timelines (04:23)
58. Named Timeline Ranges (16:52)
59. Named Timeline Ranges Summary (07:11)
60. Creating Scroll Progress Timelines using the Web Animations JS API (08:48)
61. Creating View Progress Timelines using the Web Animations JS API (12:27)
62. Exercise Overview (05:51)
63. Assets Credits (00:16)
64. [Exercise] Animating the SVG Logo Path (11:08)
65. [Exercise] Animating the Header Background (07:18)
66. [Exercise] Animating the Hero Section (Part 1) (16:05)
67. [Exercise] Animating the Hero Section (Part 2) (07:26)
68. [Exercise] Animating the Features Section (18:25)
69. [Exercise] Animating the Team Members Section (Part 1) (18:05)
70. [Exercise] Animating the Team Members Section (Part 2) (04:46)
71. [Exercise] Animating the Services Section (Part 1) (14:34)
72. [Exercise] Animating the Services Section (Part 2) (16:00)
73. [Exercise] Turning off the Animations According to the User Preference (09:23)
74. [Exercise] Fixing Styles for Unsupported Browsers (05:57)
75. Introduction & Demo App (06:49)
76. Assets Credits (00:05)
77. Getting Started with the View Transitions API (11:01)
78. Customizing the Default Crossfade Animation (06:25)
79. Isolating Elements For More Control on Our Transition Animation (10:12)
80. Adding View Transition Name Dynamically (11:30)
81. ViewTransition Object Methods & Promises (09:46)
82. Using View Transition Promises to Scroll an Item Into View (04:58)
83. Transforming the Thumbnail Image Into the Large Image (12:55)
84. Transforming the Thumbnail Image Into the Large Image (Cont.) (06:26)
85. Animating Grid Items with Dynamic View Transition Names (09:37)
86. Changing Transition Animations For Users Who Prefer Reduced Motion (02:55)
87. Animating the View Transitions Pseudo Elements with the Web Animations API (17:14)
88. Note for the Next Lectures (00:11)
89. Introduction (13:48)
90. Assets Credits (00:04)
91. Animating the Letters (11:16)
92. Animating the lives & coins (13:31)
93. Handling Duplicate Letters (17:42)
94. Animating the Modal (05:42)
95. Using View Transitions with JS Frameworks [ReactJS & Svelte Example] (09:13)
96. Using View Transitions with Single Page Applications (03:15)
97. Introduction (05:45)
98. Using onNavigate to Initialize a View Transition Between Routes (08:52)
99. Animating the Image (04:43)

Who is this course for?

1. It is good for web developers who wish to know more about animation in browsers.
2. Web developers aspiring to utilize other new animation APIs like the Web Animations API.

Click on the links below to Download Modern Web Animations!