How to Control CSS Animations with JavaScript
When it comes to animations on the web, developers need to measure the animation's requirements with the right technology -- CSS or JavaScript. Many animations are manageable with CSS but JavaScript will always provide more control. With document.getAnimations, however, you can use JavaScript to manage CSS animations!
The document.getAnimations method returns an array of CSSAnimation objects. CSSAnimation provides a host of information about the animation: playState, timeline, effect, and events like onfinish. You can then modify those objects to adjust animations:
// Make all CSS animations on the page twice as fast
document.getAnimations().forEach((animation) => {
animation.playbackRate *= 2;
});
// Stop all CSS animations on the page
document.getAnimations().forEach((animation) => {
animation.cancel();
});
How could adjusting CSS animations on the fly be useful to developers? Maybe use the Battery API to stop all animations when the device battery is low. Possibly to stop animations when the user has scrolled past the animation itself.
I love the way you can use JavaScript to modify CSS animations. Developers used to need to choose between CSS and JavaScript -- now we have the tools to make them work together!
Wow! I had no idea you could do that! Is getAnimations in an experimental stage? Are most browsers supporting it?
I use CSS animations a lot! One area where I found frustration was using CSS transform(rotate) combined with transitions. I was building a clock and wanted a smooth motion feel in the clock hands, so transitions were my goal. However, I found that when you try to rotate an element from 360 degrees back to 0 degrees, CSS transitions have to rotate the element in the opposite direction! This was an obviously ugly effect for a clock because clock hands don’t do that! I tried using setTimeout on my animations but that just caused an ugly scenario of setTimeout hell. I tried all sorts of workarounds, but I hate those and none of them seemed to work anyway. Finally, I decided the only way was to create my own transition effects with javascript. This solved my ugly animation problem of rewinding clock hands to return to 0 degrees rotation.