Chapter 8

The Web Animations API


Recipe 8.1
Applying a Ripple Effect on Click

Trigger an animation when clicking on an element.

Recipe 8.2
Pausing and Resuming Animations

Pause and resume the playback of a running animation.

Recipe 8.3
Animating DOM Insertion and Removal

Add or remove an element with an animation effect.

Recipe 8.4
Reversing Animations

Stop an animation before it finishes and reverse it.

Recipe 8.5
Showing a Scroll Progress Indicator

Animate an element as you scroll.

Recipe 8.6
Making an Element Bounce

Use multiple animations in a sequence to create a bounce effect.

Recipe 8.7
Running Multiple Animations Simultaneously

Apply multiple animations to an element at the same time.

Recipe 8.8
Showing a Loading Animation

Show an animated loading indicator while waiting for a Promise to resolve.

Recipe 8.9
Respecting the User's Animation Preference

Simplify or disable animations when the user has requested reduced motion.

Web Browser API Cookbook
Joe Attardi