Animating with the JavaScript Web Animations API
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.
More
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
| # | 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
20 Web Projects With Vanilla JavaScript
The Ultimate Web Scraping Course
The Ultimate JavaScript Animation Course
Modern JavaScript Full Course
Build Incredible Chatbots
DevOps.js Conference 2021
JavaScript: The Advanced Concepts
