Animating with the JavaScript Web Animations API
Course 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.
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
All Course Lessons (23)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | Introduction Demo | 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 |
Unlock unlimited learning
Get instant access to all 22 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionComments
0 commentsWant to join the conversation?
Sign in to commentSimilar courses
Creating a simple portfolio website with WebGL and Barba.js
Learn JavaScript Closures (PRO)
Asynchronous JavaScript
CS50's Web Programming with Python and JavaScript
