Animation: commitStyles() method

Baseline 2022

Newly available

Since September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

The commitStyles() method of the Web Animations API's Animation interface writes the computed values of the animation's current styles into its target element's style attribute. commitStyles() works even if the animation has been automatically removed.

commitStyles() can be used in combination with fill to cause the final state of an animation to persist after the animation ends. The same effect could be achieved with fill alone, but using indefinitely filling animations is discouraged. Animations take precedence over all static styles, so an indefinite filling animation can prevent the target element from ever being styled normally.

Using commitStyles() writes the styling state into the element's style attribute, where they can be modified and replaced as normal.

Syntax

commitStyles()

Parameters

None.

Return value

None (undefined).

Examples

Committing the final state of an animation

In this example we have two buttons, labeled "Commit styles" and "Fill forwards". Both buttons animate when you click them, and both buttons persist the final state of the animation.

The difference, though, is that "Fill forwards" only uses fill: "forwards" to persist the animation's final state: this means that the browser has to maintain the animation's state indefinitely, or until it can be automatically removed.

However, the "Commit styles" button waits for the animation to finish, then calls commitStyles(), then cancels the animation, so the finished style is captured as the value of the style attribute, rather than as the animation state.

HTML

html

<button class="commit-styles">Commit styles</button>
<br />
<button class="fill-forwards">Fill forwards</button>

button {
  margin: 0.5rem;
}

JavaScript

const commitStyles = document.querySelector(".commit-styles");
let offset1 = 0;

commitStyles.addEventListener("click", async (event) => {
  // Start the animation
  offset1 = 100 - offset1;
  const animation = commitStyles.animate(
    { transform: `translate(${offset1}px)` },
    { duration: 500, fill: "forwards" },
  );

  // Wait for the animation to finish
  await animation.finished;
  // Commit animation state to style attribute
  animation.commitStyles();
  // Cancel the animation
  animation.cancel();
});

const fillForwards = document.querySelector(".fill-forwards");
let offset2 = 0;

fillForwards.addEventListener("click", async (event) => {
  // Start the animation
  offset2 = 100 - offset2;
  const animation = fillForwards.animate(
    { transform: `translate(${offset2}px)` },
    { duration: 500, fill: "forwards" },
  );
});

Result

Specifications

Specification
Web Animations # dom-animation-commitstyles

Browser compatibility

BCD tables only load in the browser