Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Animating with the JavaScript Web Animations API
Rating: 4.5 out of 5(36 ratings)
216 students

Animating with the JavaScript Web Animations API

Give your web animations super-powers by with the JavaScript Web Animations API
Created byBen Frain
Last updated 9/2021
English
English [Auto],

What you'll learn

  • Animating with JavaScript using the Web Animations API
  • How to convert CSS animations to JavaScript
  • How to create animation based interaction with JavaScript

Course content

1 section • 23 lectures • 1h 59m total length

  • Introduction1:19

    Learn to create sequenced animations with the JavaScript Web Animations API to coordinate multiple effects in a single interaction.

  • What even is an API?1:49

    Demystify the web animations API by understanding that an API is a browser built interface that lets you control animations with JavaScript, a standard with broad support.

  • Why not just use CSS?10:46

    Explore how to animate with the web animations api, compare it to css approaches, and use keyframes, duration, delay, and easing to move and morph a square.

  • The Project we will be building1:30

    See how to build animated scenes with the Web Animations API, moving a rocket and other elements across the stage with synchronized sequences.

  • A Simple Web Animation Example8:00

    Create your first web animation with the Web Animations API, transforming a square into a circle and back using keyframes, transform, and millisecond timing.

  • Project Refresh1:32

    Refresh the main project layout—a stage area or canvas with next and pause controls and a readout—while we build the shell and review timing functions and keyframe animations.

  • Basic Setup3:47

    Start with a minimal setup for the Web Animations API by linking styles and scripts, then run a local server with Browser Sync for instant live reload without build tools.

  • Creating the Stage and Controls9:56

    Set up the stage and controls for the web animations project by wiring next and previous buttons, tracking current and max indices, and toggling disabled states within a fixed stage.

  • Web Animation theory: Keyframes5:38

    Explore keyframes and tweening in web animations, learn to specify keyframe points and in-between steps with the Web Animations API, and use translate, scale, and duration.

  • Timing Options6:07

    Explore timing options in the Web Animations API by configuring duration, delay, iterations (including infinite), and direction (normal, reverse, alternate, alternate reverse), plus easing and bezier curves for animations.

  • The same animation made with CSS and JavaScript5:52

    Compare CSS and JavaScript animations by rendering two spinners, one with CSS keyframes and the other with the Web Animations API, highlighting duration, delay, forwards, and iterations.

  • Adding Animations together5:28

    Combine animations using the JavaScript Web Animations API to run multiple transforms on one element. Use composite options like accumulate or replace, set alternate direction, and pause or attach animations.

  • Separating Keyframes and Timings4:22

    Learn to separate keyframes and timings for JavaScript animations using the Web Animations API, naming keyframes, and modularizing code for cleaner, scalable motion.

  • Animation File Overview11:57

    Explore the HTML structure, asset preparation, and styling behind the JavaScript Web Animations API project, including SVG optimization, absolute positioning, and CSS-driven animation.

  • Writing the Animations4:11

    Write keyframe animations for elements like text, rockets, and aliens using the Web Animations API. Use offset values to time frames, sequence keyframes, and build cohesive animations.

  • Sequencing Animations4:51

    Sequence animations using the Web Animations API and promises, control keyframes, reset scenes with zero durations, and time transitions beyond CSS.

  • Callbacks and Promises basic explainer5:36

    Explain how promises in JavaScript replace callbacks for sequencing animations with the Web Animations API by using the dot finished dot, then pattern to run one animation after another.

  • Pausing and Restarting Animations4:08

    Toggle playback of web animations with the Web Animations API by using getAnimations to pause running animations. Then play paused ones and consider refactoring to bind animations to variables.

  • Refactoring our code9:33

    Refactor code to encapsulate animations with a reset animations function, exploring play, pause, reverse, cancel, and finish in the JavaScript Web Animations API.

  • No More Matrix2:30

    Explore using the web animations api to read and drive element transforms with getComputedStyle, using it as a starting point for subsequent animations and replacing the legacy matrix property.

  • New Animations mid-transform7:16

    Explore how to create interactive web animations with the JavaScript Web Animations API, including a black hole effect that pulls page elements using random coordinates, transforms, and keyframes.

  • Committing Styles into the DOM1:41

    Explore how the animation.commitStyles method applies the final end-state of each animation as inline styles on the element, looping through animated elements to reveal the final result.

  • Conclusion1:33

    Master web animations with the JavaScript Web Animations API. Evolve from no animations to building sequenced effects that move DOM transforms, pause, and replay.

Requirements

  • You should understand HTML and CSS and have some familiarity with JavaScript
  • A text editor like Sublime Text or VSCode and a web browser

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.

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.

What you need

All you need to get started with this class is a text editor like Sublime Text or VS Code, a modern web browser and a tolerance for mediocre jokes.

Who this course is for:

  • Front-end Developers looking to create animations with JavaScript
  • JavaScript developers looking to animate elements

Report abuse