Animating with the JavaScript Web Animations API

1h 59m 45s
English
Paid

This course teaches you how to animate on the Web using the JavaScript Web Animations API W3C standard. You'll learn how to transfer what you already know how to do in CSS, into JavaScript and then add extra capabilities like pausing and playing animations, starting one animation half way through another. Combining different animations together and synchronising a number of animations. All things you just can't do presently with CSS alone.

Read more about the course

We will start by re-making some basic CSS animations with the JavaScript Web Animations API, then once we get through the fundamentals, we will start making our project together — a interactive set of sequenced animations.

By the end of the course you should have a solid understanding of how to animate on the Web with the JavaScript Web Animations API.

What we will build

We will be building, from scratch, a multi-scene piece of interaction with just HTML, CSS and JavaScript and no external libraries. Instead of CSS we will use the JavaScript Web Animations API to handle our animations and learn about all the extra capabilities it provides over CSS alone.

Along the way, we will also look at how to setup a very simple local server that will live reload changes to our code as we work.

The code is free to download on GitHub and split into folders for each video; each one providing the code as it's left at the end of each video.

Watch Online Animating with the JavaScript Web Animations API

Join premium to watch
Go to premium
# Title Duration
1 Introduction 01:20
2 The Project we will be building 01:31
3 Why not just use CSS? 10:47
4 What even is an API? 01:50
5 A Simple Web Animation Example 08:01
6 Project Refresh 01:33
7 Basic Setup 03:48
8 Creating the Stage and Controls 09:57
9 Web Animation theory: Keyframes 05:39
10 Timing Options 06:08
11 The same animation made with CSS and JavaScript 05:53
12 Adding Animations together 05:29
13 Separating Keyframes and Timings 04:23
14 Animation File Overview 11:58
15 Writing the Animations 04:12
16 Sequencing Animations 04:52
17 Callbacks and Promises basic explainer 05:37
18 Pausing and Restarting Animations 04:09
19 Refactoring our code 09:34
20 No More Matrix 02:31
21 New Animations mid-transform 07:17
22 Committing Styles into the DOM 01:42
23 Conclusion 01:34

Similar courses to Animating with the JavaScript Web Animations API

Conquer JavaScript by Building Your Own Framework from Scratch

Conquer JavaScript by Building Your Own Framework from Scratchzerotomastery.io

Category: JavaScript
Duration 1 hour 18 minutes 15 seconds
Fast and Furious Game Development with JavaScript and AI

Fast and Furious Game Development with JavaScript and AIudemy

Category: JavaScript, ChatGPT
Duration 45 hours 58 minutes 32 seconds
Full-Stack Web Developer Bootcamp with Real Projects

Full-Stack Web Developer Bootcamp with Real Projectsudemy

Category: JavaScript, HTML, CSS, Node.js, MongoDB, JQuery
Duration 22 hours 11 minutes 13 seconds
Testing JavaScript with Kent C. Dodds

Testing JavaScript with Kent C. DoddsKent C. Dodds

Category: JavaScript, Cypress, Other (QA)
Duration 14 hours 11 minutes 26 seconds
Advanced JavaScript Unleashed

Advanced JavaScript Unleashedfullstack.io

Category: JavaScript
Duration
Youtube clone

Youtube cloneNomad Coders

Category: JavaScript, Node.js, MongoDB
Duration 15 hours 41 minutes 20 seconds
Asynchronous JavaScript

Asynchronous JavaScriptudemy

Category: JavaScript
Duration 4 hours 38 minutes 53 seconds