How to Manage CSS Animations with JavaScript

When it concerns animations on the internet, designers require to determine the animation’s requirements with the best innovation– CSS or JavaScript. Numerous animations are workable with CSS however JavaScript will constantly offer more control. With document.getAnimations, nevertheless, you can utilize JavaScript to handle CSS animations!

The document.getAnimations approach returns a variety of CSSAnimation things. CSSAnimation supplies a host of info about the animation: playState, timeline, impact, and occasions like onfinish You can then customize those challenge change animations:

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

// Stop all CSS animations on the page.
document.getAnimations(). forEach(( animation) => > {
animation.cancel();.
} );.

How could changing CSS animations on the fly work to designers? Possibly utilize the Battery API to stop all animations when the gadget battery is low. Perhaps to stop animations when the user has actually scrolled past the animation itself.

I enjoy the method you can utilize JavaScript to customize CSS animations. Designers utilized to require to select in between CSS and JavaScript– now we have the tools to make them interact!