CF

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

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

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

Related courses

Frequently asked questions

What prior knowledge do I need before taking this course?
Before enrolling, students should have a basic understanding of HTML, CSS, and JavaScript. Familiarity with CSS animations is beneficial as the course involves converting CSS animations to JavaScript using the Web Animations API. Knowledge of setting up a local development environment will also be helpful.
What project will I build during the course?
The course guides you through the creation of a multi-scene interactive piece using HTML, CSS, and JavaScript. You will implement animations using the JavaScript Web Animations API, without relying on external libraries, showcasing its capabilities over traditional CSS animations.
Who is the target audience for this course?
The course is designed for web developers interested in enhancing their animation skills using the JavaScript Web Animations API. It's suitable for those who have a basic understanding of web development and wish to go beyond what CSS animations currently offer.
How does this course differ from other animation courses?
Unlike courses focusing solely on CSS animations, this course dives into the JavaScript Web Animations API, covering advanced features like pausing, playing, and synchronizing multiple animations. It emphasizes converting CSS techniques into JavaScript, offering more control and functionality.
What specific tools and platforms will I use in this course?
Students will use HTML, CSS, and JavaScript to build animations. The course focuses on the JavaScript Web Animations API, and you will also set up a simple local server to enable live reloading as you develop your project.
What topics are not covered in this course?
The course does not cover external animation libraries or frameworks. It focuses exclusively on using the JavaScript Web Animations API to build animations, without delving into third-party solutions or advanced graphical design tools.
What is the time commitment for completing this course?
The course comprises 23 lessons, with each lesson providing a segment of the overall project. Although the runtime is not specified, students should allocate additional time for hands-on practice and setting up their local environment to fully grasp the material.