Download Modern Web Animations Course for Free

Before Watching the Course

Using CSS Transition with JavaScript

Transition Behavior & Discrete Animations

Animating an Element from display none to display block

Using JavaScript Transition Events

More on @starting-style

Setting Up Our Project Folder

Using @starting-style rule

Timing Functions Boilerplate Code

Introduction to CSS Transitions

Introduction to CSS Animations

Smooth Animations with Cubic Bezier Timing Functions

Linear Timing Functions

CSS Animations Properties

Animating in Jumps Using the Steps Timing Function

Adding Multiple Animations

More on the @keyframe at-rule

Animations JavaScript Events

Animation Fill Mode

Animation Composition

Discrete Animations

Animations Exercise (Part 2)

Animations Exercise (Part 1)

Animations Exercise (Part 3)

Animations Exercise (Part 4)

Timeline, Animation Objects & Animation Effects

When to use the Web Animations API

Iteration Composite

Another Way for Defining Keyframes

Creating our First Animation Using the Web Animations API

Controlling Our Animation with Animation Object Methods

More on the currentTime Property

Updating Our Animation Effect (Keyframe Effect)

Getting Information About Our Animations

More on the startTime Property

Finished Promise, Finish and Cancel Events

Animation Pending State & Ready Promise

Getting All Animations in the Document or an Element

Persisting Filling Animations Styles with commitStyles

Automatic Animations Removal By Browsers

Web Animations API Exercise Overview

Animating the Street, Background and Foreground

Pausing the Entire Scene

Speeding Up And Slowing Down Our Character

Exercise Animating the Character

Adding and Animating a Shadow to Our Character

Adding a Random Car to the Scene

Animating the Car Wheels

Randomizing Our Car's Speed & Occurrence

An Overview to Scroll Based Animations

Customizing the Animation Range

Anonymous Scroll Progress Timelines

Named Scroll Progress Timelines

Timeline Scope

Anonymous View Progress Timelines

Named View Progress Timelines

View Timeline Inset

Named Timeline Ranges

Creating Scroll Progress Timelines using the Web Animations JS API

Named Timeline Ranges Summary

Creating View Progress Timelines using the Web Animations JS API

Exercise Overview

[Exercise] Animating the Header Backgroud

[Exercise] Animating the SVG Logo Path

[Exercise] Animating the Hero Section (Part 2)

[Exercise] Animating the Hero Section (Part 1)

[Exercise] Animating the Team Members Section (Part 2)

[Exercise] Animating the Features Section

[Exercise] Animating the Team Members Section (Part 1)

[Exercise] Animating the Services Section (Part 1)

[Exercise] Fixing Styles for Unsupported Browsers

[Exercise] Animating the Services Section (Part 2)

[Exercise] Turning off the Animations According to the User Preference

Introduction & Demo App

Customizing the Default Crossfade Animation

Isolating Elements For More Control on Our Transition Animation

Getting Started with the View Transitions API

ViewTransition Object Methods & Promises

Using View Transition Promises to Scroll an Item Into View

Adding View Transition Name Dynamically

Changing Transition Animations For Users Who Prefers Reduced Motion

Transforming the Thumbnail Image Into the Large Image (Cont.)

Transforming the Thumbnail Image Into the Large Image

Animating Grid Items with Dynamic View Transition Names

[Words Game Exercise] Animating the Letters

[Words Game Exercise] Introduction

Animating the View Transitions Pseudo Elements with the Web Animations API

[Words Game Exercise] Animating the lives & coins

[Words Game Exercise] Animating the Modal

[Words Game Exercise] Handling Duplicate Letters

Using View Transitions with Single Page Applications

Using View Transitions with JS Frameworks [ReactJS & Svelte Example]

[SvelteKit Example] Introduction

[SvelteKit] Animating the Image

[SvelteKit] Using onNavigate to Initialize a View Transition Between Routes

[SvelteKit] Different Transition Animation for Mobile Screens

[Update] Cross Document View Transitions

[Update] Cross Document View Transitions (Cont.)