This class teaches you how to animate on the Web using the JavaScript Web Animations API.
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.
Who is this class for?
You don't need to be a JavaScript expert to use this API — I'm not!
However, if you are completely new to web development, this probably isn't the class for you. I'd expect you to know how to write HTML and CSS and have a basic understanding of JavaScript. If you know what a function looks like, and how to write a click handler with 'addEventListener' I reckon you will be fine!

Introduction

The Project Build

Why not just use CSS?

What even is an API?

A Simple Web Animation API Example

Project Refresh

Basic Setup

Creating the Stage and Controls

Web Animation theory: Keyframes

Timing Options

The Same Animation made with CSS and JS

Adding Animations Together

WAAPI 13

Animation File Overview

Writing the Animations

Sequencing Animations

Callbacks and Promises Basic Explainer

Pausing and Restarting Animations

Refactoring Our Code

No More Matrix

New Animations mid-transform

Committing Styles into the DOM

Conclusion

Animating with the JavaScript Web Animations API

Ben Frain gave you 1 free month of Skillshare

Get 1 free month of Skillshare

Animating with the JavaScript Web Animations API

Creative Learning Made Easy

Company

Community

Teaching

Mobile

English

English