Modern Web Animations

Modern Web Animations, available at $54.99, has an average rating of 4.69, with 103 lectures, based on 25 reviews, and has 387 subscribers.

You will learn about 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. This course is ideal for individuals who are Web developers looking to learn everything about animating in the browser. or Web developers looking to learn about new animation APIs like the Web Animations API, scroll driven animations & the View Transitions API. It is particularly useful for Web developers looking to learn everything about animating in the browser. or Web developers looking to learn about new animation APIs like the Web Animations API, scroll driven animations & the View Transitions API.

Enroll now: Modern Web Animations

Summary

Title: Modern Web Animations

Price: $54.99

Average Rating: 4.69

Number of Lectures: 103

Number of Published Lectures: 103

Number of Curriculum Items: 103

Number of Published Curriculum Objects: 103

Original Price: $22.99

Quality Status: approved

Status: Live

What You Will 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.

Who Should Attend

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.

Target Audiences

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.

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!

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 Cars 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]

Instructors

Ali Alaa
Front-end Web Developer

Rating Distribution

1 stars: 0 votes

2 stars: 0 votes

3 stars: 1 votes

4 stars: 6 votes

5 stars: 18 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!