Chapter 8
The Web Animations API
Examples
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.
