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

Zero to Full Stack Hero

Zero to Full Stack Heropapareact.com

Category: JavaScript, React.js, Others, CSS, Node.js, GraphQL, Firebase
Duration 101 hours 29 minutes 59 seconds
Asynchronous JavaScript

Asynchronous JavaScriptudemy

Category: JavaScript
Duration 4 hours 38 minutes 53 seconds
Remake Retro Games with JavaScript

Remake Retro Games with JavaScriptudemy

Category: JavaScript
Duration 7 hours 5 minutes 41 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
Build Fullstack Trello clone: WebSocket, Socket IO

Build Fullstack Trello clone: WebSocket, Socket IOudemy

Category: Angular, JavaScript, MongoDB
Duration 8 hours 49 minutes 48 seconds
70+ JavaScript Challenges: Data Structures & Algorithms

70+ JavaScript Challenges: Data Structures & AlgorithmsBrad Traversy

Category: JavaScript
Duration 12 hours 29 minutes 29 seconds
Complete Web Developer in 2023: Zero to Mastery

Complete Web Developer in 2023: Zero to Masteryudemyzerotomastery.io

Category: JavaScript, HTML, CSS
Duration 35 hours 23 minutes 21 seconds