Modern Web Animations

Course Curriculum

Chapter 1: CSS Animations & Transitions

Lecture 1: Before Watching the Course

Lecture 2: Setting Up Our Project Folder

Lecture 3: Introduction to CSS Transitions

Lecture 4: Using CSS Transition with JavaScript

Lecture 5: Using JavaScript Transition Events

Lecture 6: Transition Behavior & Discrete Animations

Lecture 7: Animating an Element from display: none to display: block

Lecture 8: Using @starting-style rule

Lecture 9: More on @starting-style

Lecture 10: Timing Functions Boilerplate Code

Lecture 11: Linear Timing Functions

Lecture 12: Smooth Animations with Cubic Bezier Timing Functions

Lecture 13: Animating in Jumps Using the Steps Timing Function

Lecture 14: Introduction to CSS Animations

Lecture 15: CSS Animations Properties

Lecture 16: Adding Multiple Animations

Lecture 17: Animation Composition

Lecture 18: Animation Fill Mode

Lecture 19: More on the @keyframe at-rule

Lecture 20: Animations JavaScript Events

Lecture 21: Discrete Animations

Lecture 22: Animations Exercise (Part 1)

Lecture 23: Animations Exercise (Part 2)

Lecture 24: Animations Exercise (Part 3)

Lecture 25: Animations Exercise (Part 4)

Chapter 2: The Web Animations API

Lecture 1: When to use the Web Animations API

Lecture 2: Timeline, Animation Objects & Animation Effects

Lecture 3: Creating our First Animation Using the Web Animations API

Lecture 4: Another Way for Defining Keyframes

Lecture 5: Quick Note!

Lecture 6: Iteration Composite

Lecture 7: Controlling Our Animation with Animation Object Methods

Lecture 8: Updating Our Animation Effect (Keyframe Effect)

Lecture 9: Getting Information About Our Animations

Lecture 10: More on the currentTime Property

Lecture 11: More on the startTime Property

Lecture 12: Animation Pending State & Ready Promise

Lecture 13: Finished Promise, Finish and Cancel Events

Lecture 14: Getting All Animations in the Document or an Element

Lecture 15: Persisting Filling Animations Styles with commitStyles

Lecture 16: Automatic Animations Removal By Browsers

Lecture 17: Web Animations API Exercise Overview

Lecture 18: Exercise: Animating the Character

Lecture 19: Animating the Street, Background and Foreground

Lecture 20: Pausing the Entire Scene

Lecture 21: Speeding Up And Slowing Down Our Character

Lecture 22: Adding and Animating a Shadow to Our Character

Lecture 23: Adding a Random Car to the Scene

Lecture 24: Randomizing Our Car's Speed & Occurrence

Lecture 25: Animating the Car Wheels

Chapter 3: Scroll Driven Animations

Lecture 1: An Overview to Scroll Based Animations

Lecture 2: Named Scroll Progress Timelines

Lecture 3: Anonymous Scroll Progress Timelines

Lecture 4: Customizing the Animation Range

Lecture 5: Timeline Scope

Lecture 6: Named View Progress Timelines

Lecture 7: View Timeline Inset

Lecture 8: Anonymous View Progress Timelines

Lecture 9: Named Timeline Ranges

Lecture 10: Named Timeline Ranges Summary

Lecture 11: Creating Scroll Progress Timelines using the Web Animations JS API

Lecture 12: Creating View Progress Timelines using the Web Animations JS API

Lecture 13: Exercise Overview

Lecture 14: Assets Credits

Lecture 15: [Exercise] Animating the SVG Logo Path

Lecture 16: [Exercise] Animating the Header Backgroud

Lecture 17: [Exercise] Animating the Hero Section (Part 1)

Lecture 18: [Exercise] Animating the Hero Section (Part 2)

Lecture 19: [Exercise] Animating the Features Section

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

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

Lecture 22: [Exercise] Animating the Services Section (Part 1)

Lecture 23: [Exercise] Animating the Services Section (Part 2)

Lecture 24: [Exercise] Turning off the Animations According to the User Preference

Lecture 25: [Exercise] Fixing Styles for Unsupported Browsers

Chapter 4: View Transitions API

Lecture 1: Introduction & Demo App

Lecture 2: Assets Credits

Lecture 3: Getting Started with the View Transitions API

Lecture 4: Customizing the Default Crossfade Animation

Lecture 5: Isolating Elements For More Control on Our Transition Animation

Lecture 6: Adding View Transition Name Dynamically

Lecture 7: ViewTransition Object Methods & Promises

Lecture 8: Using View Transition Promises to Scroll an Item Into View

Lecture 9: Transforming the Thumbnail Image Into the Large Image

Lecture 10: Transforming the Thumbnail Image Into the Large Image (Cont.)

Lecture 11: Animating Grid Items with Dynamic View Transition Names

Lecture 12: Changing Transition Animations For Users Who Prefers Reduced Motion

Lecture 13: Animating the View Transitions Pseudo Elements with the Web Animations API

Lecture 14: Note for the Next Lectures

Lecture 15: [Words Game Exercise] Introduction

Lecture 16: [Words Game Exercise] Assets Credits

Lecture 17: [Words Game Exercise] Animating the Letters

Lecture 18: [Words Game Exercise] Animating the lives & coins

Lecture 19: [Words Game Exercise] Handling Duplicate Letters

Lecture 20: [Words Game Exercise] Animating the Modal

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