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!
CSS Filters
CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let’s have…
JavaScript Canvas Image Conversion
At last week’s Mozilla WebDev Offsite, we all spent half of the last day hacking on our future Mozilla Marketplace app. One mobile app that recently got a lot of attention was Instagram, which sold to Facebook for the bat shit crazy price of one…
Source link
