Controlling Css Animations with JavaScript

Posted By : Mohit Kumar | 31-Jan-2023

Web designers must determine the needs of animations and match the appropriate technology, such as CSS or JavaScript, to those needs. Although CSS can handle a lot of animations, JavaScript will always provide you more control. However, managing CSS animations with JavaScript is possible with document.getAnimations.

Its contents. An array of CSSAnimation objects are returned by the getAnimations function. A range of details about the animation are provided by CSSAnimation, including playState, chronology, effect, and events like onfinish. After that, you can change those objects to alter animations:

 

//Boost the page's CSS animations' speed by twofold.

document.getAnimations().forEach((animation) => {
  animation.playbackRate *= 2;
});

// Turn off every CSS animation on the page.

document.getAnimations().forEach((animation) => {
  animation.cancel();
});

How could developers benefit from modifying CSS animations on the fly? When the device's battery is low, you might consider using the Battery API to halt all animations. Animations might be stopped if the user scrolls past them.

I enjoy how you can alter CSS animations with JavaScript. We now have the tools to make CSS and JavaScript operate together, unlike the past when developers had to pick between the two.

Battery API

The implementation we require is hosted on the navigator object and is called getBattery.

navigator.getBattery().then(function(result) {});

The call to getBattery() returns a promise, and the callback that is given a BatteryManager object is given the example data that follows.

// result:
BatteryManagery {
	charging: false,
	chargingTime: Infinity,
	dischargingTime: 8990,
	level: 0.52,
	onchargingchange: null,
	onchargingtimechange: null,
	ondischargingtimechange: null,
	onlevelchange: null
}

 

It's annoying, but something we've grown accustomed to doing to account for different browser prefixes. However, when the process is entirely different, it's a huge hassle. Let's hope that other browser manufacturers update as soon as possible so that we may once again use a single, browser-prefixed API.

  • Charging representing if the system's battery is charged. If the battery is charging, full, the implementation is unable to report the state, there is no battery attached to the system, or for any other reason, the property must be set to true. If the battery is discharging, it must be set to false.
  • Charging Time: Indicates how many seconds are left before the system's battery is fully charged.
  • Discharging Time: Indicates how many seconds are left before the system's battery is totally depleted and the system is about to be halted.
  • Level: Displays the battery's current level on a scale from 0 to 1.0. The property must be set to 1.0 if the battery is fully charged and the system is about to halt operation, and to 0 otherwise.

 

About Author

Author Image
Mohit Kumar

Mohit is working as a Frontend Developer, he specializes in designing and building user-friendly interfaces for websites and web applications. He has a thorough understanding of HTML, CSS, and JavaScript, and excels at creating responsive and accessible layouts that are optimized for different browsers and devices. He have worked on projects such as Communication Scaffold, Oodles Dashboard and many more using various technologies and frameworks. He have extensive expertise in popular frontend frameworks such as React and Angular, he is well-versed in using various tools and build processes such as Webpack, Babel, and NPM. His strong sense of design and deep understanding of user experience principles enables him to work closely with designers and stakeholders to bring their vision to life while ensuring the frontend is functional and visually appealing.

Request for Proposal

Name is required

Comment is required

Sending message..