Management CSS Animations with JavaScript

On the subject of animations on the net, builders must measure the animation’s necessities with the proper expertise — CSS or JavaScript. Many animations are manageable with CSS however JavaScript will at all times present extra management. With doc.getAnimations, nevertheless, you should utilize JavaScript to handle CSS animations!

The doc.getAnimations methodology returns an array of CSSAnimation objects. CSSAnimation supplies a number of details about the animation: playState, timeline, impact, and occasions like onfinish. You possibly can 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 might adjusting CSS animations on the fly be helpful to builders? Possibly use the Battery API to cease all animations when the machine battery is low. Presumably to cease animations when the person has scrolled previous the animation itself.

I really like the best way you should utilize JavaScript to change CSS animations. Builders used to wish to decide on between CSS and JavaScript — now we now have the instruments to make them work collectively!