Modern Web Animations

Name: Modern Web Animations
Rating: 4.8 (118 reviews)

Deep Dive into Animations and Transitions, The Web Animations API, Scroll Driven Animations and The View Transitions API

Created byAli Alaa

Last updated 9/2025

English

What you'll learn

Learn about CSS Animations & Transitions.
Learn about the new JavaScript Web Animations API.
Discover scroll driven animations in details.
Create impressive page transitions with the View Transitions API.

Course content

4 sections • 103 lectures • 15h 4m total length

Before Watching the Course2:34
Setting Up Our Project Folder6:15
Introduction to CSS Transitions11:22
Using CSS Transition with JavaScript6:44
Using JavaScript Transition Events8:58
Transition Behavior & Discrete Animations8:09
Animating an Element from display: none to display: block6:08
Using @starting-style rule8:17
More on @starting-style5:54
Timing Functions Boilerplate Code5:04
Linear Timing Functions18:02
Smooth Animations with Cubic Bezier Timing Functions7:49
Animating in Jumps Using the Steps Timing Function20:31
Introduction to CSS Animations5:49
CSS Animations Properties7:24
Adding Multiple Animations6:07
Animation Composition19:15
Animation Fill Mode9:30
More on the @keyframe at-rule8:57
Animations JavaScript Events4:48
Discrete Animations9:22
Animations Exercise (Part 1)7:11
Animations Exercise (Part 2)10:21
Animations Exercise (Part 3)9:47
Animations Exercise (Part 4)7:18

When to use the Web Animations API6:29
Timeline, Animation Objects & Animation Effects6:36
Creating our First Animation Using the Web Animations API15:32
Another Way for Defining Keyframes10:23
Quick Note!0:13
Iteration Composite5:13
Controlling Our Animation with Animation Object Methods10:14
Learn to control web animations with an animation object, using play, pause, reverse, cancel, and finish buttons, plus a playback rate slider for smooth, infinite iterations.
Updating Our Animation Effect (Keyframe Effect)9:31
Getting Information About Our Animations11:50
More on the currentTime Property8:30
More on the startTime Property7:08
Animation Pending State & Ready Promise11:22
Explore how play state tracks animation status—running, paused, idle, finished—and how the pending property signals asynchronous waiting and how the ready promise resolves.
Finished Promise, Finish and Cancel Events3:59
Getting All Animations in the Document or an Element10:04
Persisting Filling Animations Styles with commitStyles7:26
Automatic Animations Removal By Browsers10:27
Web Animations API Exercise Overview2:19
Exercise: Animating the Character13:17
Animating the Street, Background and Foreground5:37
Pausing the Entire Scene3:36
Speeding Up And Slowing Down Our Character5:01
Adding and Animating a Shadow to Our Character5:18
Adding a Random Car to the Scene9:43
Randomizing Our Car's Speed & Occurrence9:19
Animating the Car Wheels5:10

An Overview to Scroll Based Animations6:35
Named Scroll Progress Timelines11:06
Anonymous Scroll Progress Timelines7:00
Customizing the Animation Range5:08
Timeline Scope8:32
Named View Progress Timelines11:07
View Timeline Inset9:46
Anonymous View Progress Timelines4:23
Named Timeline Ranges16:52
Named Timeline Ranges Summary7:11
Creating Scroll Progress Timelines using the Web Animations JS API8:48
Creating View Progress Timelines using the Web Animations JS API12:27
Exercise Overview5:51
Assets Credits0:16
[Exercise] Animating the SVG Logo Path11:08
[Exercise] Animating the Header Backgroud7:18
[Exercise] Animating the Hero Section (Part 1)16:05
[Exercise] Animating the Hero Section (Part 2)7:26
[Exercise] Animating the Features Section18:25
[Exercise] Animating the Team Members Section (Part 1)18:05
[Exercise] Animating the Team Members Section (Part 2)4:46
[Exercise] Animating the Services Section (Part 1)14:34
[Exercise] Animating the Services Section (Part 2)16:00
[Exercise] Turning off the Animations According to the User Preference9:23
[Exercise] Fixing Styles for Unsupported Browsers5:57

Introduction & Demo App6:49
Assets Credits0:05
Getting Started with the View Transitions API11:01
Customizing the Default Crossfade Animation6:25
Isolating Elements For More Control on Our Transition Animation10:12
Adding View Transition Name Dynamically11:30
isolate the sidebar using a view transition name, control root versus isolated animations, and toggle view transition names with JavaScript to manage grid and header transitions.
ViewTransition Object Methods & Promises9:46
Using View Transition Promises to Scroll an Item Into View4:58
Transforming the Thumbnail Image Into the Large Image12:55
Transforming the Thumbnail Image Into the Large Image (Cont.)6:26
Animating Grid Items with Dynamic View Transition Names9:37
Changing Transition Animations For Users Who Prefers Reduced Motion2:55
Animating the View Transitions Pseudo Elements with the Web Animations API17:14
Note for the Next Lectures0:11
[Words Game Exercise] Introduction13:48
[Words Game Exercise] Assets Credits0:04
[Words Game Exercise] Animating the Letters11:16
[Words Game Exercise] Animating the lives & coins13:31
[Words Game Exercise] Handling Duplicate Letters17:42
[Words Game Exercise] Animating the Modal5:42
Using View Transitions with JS Frameworks [ReactJS & Svelte Example]9:13
Using View Transitions with Single Page Applications3:15
[SvelteKit Example] Introduction5:45
[SvelteKit] Using onNavigate to Initialize a View Transition Between Routes8:52
[SvelteKit] Animating the Image4:43
[SvelteKit] Different Transition Animation for Mobile Screens8:22
[Update] Cross Document View Transitions13:21
[Update] Cross Document View Transitions (Cont.)18:23

Requirements

Some basic HTML, CSS & JavaScript Knowledge is required.

Description

Welcome to Modern Web Animations, a deep dive into modern animation techniques with no libraries, only browser APIs.

CSS Animations & Transitions have been around for a long time now. But recently new APIs were introduced to modern browsers to further improve animating on the web and give developers more control.

Among these new additions is the Web Animations API (WAAPI). The Web Animations API unlocks the power of the browser's animation engine for developers. It allows us to construct animations and control their playback with JavaScript. It is one of the most performant ways to animate on the Web.

In addition to that, new features were added to CSS Animations that allow us to control animations as users scroll. By adding new properties like animation-timeline, scroll-timeline and view-timeline, we can now have animations that are not based on time but based on scrolling progress or based on the visibility of a certain element in the viewport. This opens the door to creating impressive scroll driven animations without having to load any external libraries.

Another recent addition to modern browsers is the introduction of the View Transitions API. This API allows us to easily create animated transitions between different DOM states. It can be especially useful in Single Page Applications (SPAs) when we need to have an animation when navigating between different routes. Before the View Transitions API these kinds of animations were extremely complicated to achieve.

In this course we are going to cover all of these topics in great detail. And not only that, but we are also going to have a section on old CSS Animations & Transitions and discuss every aspect of them in depth. We are also going to have practical examples and exercises for every topic discussed.

So join now if you want to bring your websites to life!

Who this course is for:

Web developers looking to learn everything about animating in the browser.
Web developers looking to learn about new animation APIs like the Web Animations API, scroll driven animations & the View Transitions API.

Modern Web Animations

What you'll learn

Explore related topics

Course content

CSS Animations & Transitions25 lectures • 3hr 42min

The Web Animations API25 lectures • 3hr 14min

Scroll Driven Animations25 lectures • 4hr 4min

View Transitions API28 lectures • 4hr 4min

Requirements

Description

Who this course is for: