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

SAAS Adventure - Learn to Create your own SAAS

SAAS Adventure - Learn to Create your own SAASsaasadventure.io

Category: JavaScript, Laravel
Duration 8 hours 37 minutes 3 seconds
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
Data Structures & Algorithms - JavaScript

Data Structures & Algorithms - JavaScriptudemy

Category: JavaScript
Duration 6 hours 44 minutes
Up and Running With PixiJS

Up and Running With PixiJStutspluscom

Category: JavaScript
Duration 2 hours 8 minutes 52 seconds
Advanced JavaScript Unleashed

Advanced JavaScript Unleashedfullstack.io

Category: JavaScript
Duration
The Creative Javascript Course

The Creative Javascript Coursedevelopedbyed.com

Category: JavaScript
Duration 17 hours 46 minutes 20 seconds
ES6 for everyone

ES6 for everyonewesbos

Category: JavaScript
Duration 7 hours 36 minutes
Discord Clone - Learn MERN Stack with WebRTC and SocketIO

Discord Clone - Learn MERN Stack with WebRTC and SocketIOudemy

Category: JavaScript, React.js, Node.js, MongoDB, Socket.IO, WebRTC
Duration 19 hours 29 minutes 29 seconds