Tips on how to Management CSS Animations with JavaScript

In the case of animations on the internet, builders must measure the animation’s necessities with the best know-how — CSS or JavaScript. Many animations are manageable with CSS however JavaScript will all the time present extra management. With doc.getAnimations, nevertheless, you should use JavaScript to handle CSS animations!

The doc.getAnimations methodology returns an array of CSSAnimation objects. CSSAnimation offers a number of details about the animation: playState, timeline, impact, and occasions like onfinish. You’ll be able to then modify these objects to regulate animations:

// Make all CSS animations on the web page twice as quick
doc.getAnimations().forEach((animation) => {
  animation.playbackRate *= 2;
});

// Cease all CSS animations on the web page
doc.getAnimations().forEach((animation) => {
  animation.cancel();
});

How may adjusting CSS animations on the fly be helpful to builders? Perhaps use the Battery API to cease all animations when the gadget battery is low. Probably to cease animations when the consumer has scrolled previous the animation itself.

I really like the way in which you should use JavaScript to switch CSS animations. Builders used to want to decide on between CSS and JavaScript — now we have now the instruments to make them work collectively!