Animating with the JavaScript Web Animations API

Name: Animating with the JavaScript Web Animations API
Rating: 4.5 (36 reviews)

Give your web animations super-powers by with the JavaScript Web Animations API

Created byBen Frain

Last updated 9/2021

English

What you'll learn

Animating with JavaScript using the Web Animations API
How to convert CSS animations to JavaScript
How to create animation based interaction with JavaScript

Course content

1 section • 23 lectures • 1h 59m total length

Introduction1:19
Learn to create sequenced animations with the JavaScript Web Animations API to coordinate multiple effects in a single interaction.
What even is an API?1:49
Demystify the web animations API by understanding that an API is a browser built interface that lets you control animations with JavaScript, a standard with broad support.
Why not just use CSS?10:46
Explore how to animate with the web animations api, compare it to css approaches, and use keyframes, duration, delay, and easing to move and morph a square.
The Project we will be building1:30
See how to build animated scenes with the Web Animations API, moving a rocket and other elements across the stage with synchronized sequences.
A Simple Web Animation Example8:00
Create your first web animation with the Web Animations API, transforming a square into a circle and back using keyframes, transform, and millisecond timing.
Project Refresh1:32
Refresh the main project layout—a stage area or canvas with next and pause controls and a readout—while we build the shell and review timing functions and keyframe animations.
Basic Setup3:47
Start with a minimal setup for the Web Animations API by linking styles and scripts, then run a local server with Browser Sync for instant live reload without build tools.
Creating the Stage and Controls9:56
Set up the stage and controls for the web animations project by wiring next and previous buttons, tracking current and max indices, and toggling disabled states within a fixed stage.
Web Animation theory: Keyframes5:38
Timing Options6:07
The same animation made with CSS and JavaScript5:52
Compare CSS and JavaScript animations by rendering two spinners, one with CSS keyframes and the other with the Web Animations API, highlighting duration, delay, forwards, and iterations.
Adding Animations together5:28
Combine animations using the JavaScript Web Animations API to run multiple transforms on one element. Use composite options like accumulate or replace, set alternate direction, and pause or attach animations.
Separating Keyframes and Timings4:22
Animation File Overview11:57
Explore the HTML structure, asset preparation, and styling behind the JavaScript Web Animations API project, including SVG optimization, absolute positioning, and CSS-driven animation.
Writing the Animations4:11
Sequencing Animations4:51
Callbacks and Promises basic explainer5:36
Explain how promises in JavaScript replace callbacks for sequencing animations with the Web Animations API by using the dot finished dot, then pattern to run one animation after another.
Pausing and Restarting Animations4:08
Refactoring our code9:33
No More Matrix2:30
New Animations mid-transform7:16
Committing Styles into the DOM1:41
Explore how the animation.commitStyles method applies the final end-state of each animation as inline styles on the element, looping through animated elements to reveal the final result.
Conclusion1:33
Master web animations with the JavaScript Web Animations API. Evolve from no animations to building sequenced effects that move DOM transforms, pause, and replay.

Requirements

You should understand HTML and CSS and have some familiarity with JavaScript
A text editor like Sublime Text or VSCode and a web browser

Description

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.

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.

What you need

All you need to get started with this class is a text editor like Sublime Text or VS Code, a modern web browser and a tolerance for mediocre jokes.

Who this course is for:

Front-end Developers looking to create animations with JavaScript
JavaScript developers looking to animate elements