Animating with the JavaScript Web Animations API

1h 59m 45s
English
Paid

Unlock the full potential of web animations with this course by mastering the JavaScript Web Animations API, a W3C standard. Learn to convert familiar CSS animation techniques into JavaScript, and explore advanced features like pausing and playing animations and synchronizing multiple animations—capabilities beyond current CSS offerings.

Course Overview

The course begins with recreating basic CSS animations using the JavaScript Web Animations API. As you progress through the fundamentals, you will embark on a project to create an interactive set of sequenced animations.

By the end, you’ll gain a comprehensive understanding of leveraging the JavaScript Web Animations API for web animations.

What You Will Build

Throughout the course, you will develop a multi-scene interactive piece from scratch using HTML, CSS, and JavaScript—without relying on external libraries. The JavaScript Web Animations API will be our tool of choice for handling animations, unveiling its superior capabilities over traditional CSS.

We'll also guide you through setting up a simple local server to enable live reloading of code changes as you proceed.

Resources and Support

All course code is freely available on GitHub, organized into folders corresponding to each video. Every folder provides the complete code at the end of each session.

About the Author: udemy

udemy thumbnail
By connecting students all over the world to the best instructors, Udemy is helping individuals reach their goals and pursue their dreams. Udemy is the leading global marketplace for teaching and learning, connecting millions of students to the skills they need to succeed. Udemy helps organizations of all kinds prepare for the ever-evolving future of work. Our curated collection of top-rated business and technical courses gives companies, governments, and nonprofits the power to develop in-house expertise and satisfy employees’ hunger for learning and development.

Watch Online 23 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 23 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Introduction
All Course Lessons (23)
#Lesson TitleDurationAccess
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 subscription