When you enroll through our links, we may earn a small commission—at no extra cost to you. This helps keep our platform free and inspires us to add more value.

Animation
SkillShare logo

Animating with the JavaScript Web Animations API

Unlock creativity with Skillshare! Learn acrylic painting, AI writing, graphic design, and photography.

     
  • 4.6
    •  |
  • Reviews ( 32 )
Free
Animating with the JavaScript Web Animations API

Popular Courses

This Course Includes

  • iconskillshare
  • icon4.6 (32 reviews )
  • icon1 hours 59 minutes
  • iconenglish
  • iconOnline - Self Paced
  • iconcourse
  • iconSkillShare

About Animating with the JavaScript Web Animations API

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

What You Will Learn?

  • 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!.