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

Data Structures & Algorithms - JavaScript

Data Structures & Algorithms - JavaScriptudemy

Category: JavaScript
Duration 6 hours 44 minutes
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
Make a Google search engine clone: JavaScript PHP and MySQL

Make a Google search engine clone: JavaScript PHP and MySQLudemy

Category: JavaScript, Sql, PHP
Duration 5 hours 47 minutes 11 seconds
Learn JavaScript: Full-Stack from Scratch

Learn JavaScript: Full-Stack from Scratchudemy

Category: JavaScript, MongoDB
Duration 27 hours 6 minutes 45 seconds
Web security: Injection Attacks with Java & Spring Boot

Web security: Injection Attacks with Java & Spring Bootudemy

Category: JavaScript, Spring Boot, Spring Data, Ethical Hacking / Penetration Testing
Duration 8 hours 44 minutes 36 seconds
20 Web Projects With Vanilla JavaScript

20 Web Projects With Vanilla JavaScriptudemyBrad Traversy

Category: JavaScript
Duration 16 hours 8 minutes 55 seconds
JavaScript Basics for Beginners

JavaScript Basics for Beginnerscodewithmosh (Mosh Hamedani)

Category: JavaScript
Duration 6 hours 39 minutes 44 seconds
Web Scrape Anything With JavaScript

Web Scrape Anything With JavaScriptinterviewespresso (Aaron Jack)

Category: JavaScript
Duration 6 hours 9 seconds
The Ultimate JavaScript Animation Course

The Ultimate JavaScript Animation Coursedevelopedbyed.com

Category: JavaScript
Duration 8 hours 32 minutes 37 seconds
Data Visualization + D3.js

Data Visualization + D3.jssuperhi.com

Category: JavaScript, HTML, CSS, D3.js
Duration 16 hours 48 minutes 54 seconds