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.
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
<button class="commit-styles">Commit styles</button>
<br />
<button class="fill-forwards">Fill forwards</button>
JavaScript
const commitStyles = document.querySelector(".commit-styles");
let offset1 = 0;
commitStyles.addEventListener("click", async (event) => {
offset1 = 100 - offset1;
const animation = commitStyles.animate(
{ transform: `translate(${offset1}px)` },
{ duration: 500, fill: "forwards" },
);
await animation.finished;
animation.commitStyles();
animation.cancel();
});
const fillForwards = document.querySelector(".fill-forwards");
let offset2 = 0;
fillForwards.addEventListener("click", async (event) => {
offset2 = 100 - offset2;
const animation = fillForwards.animate(
{ transform: `translate(${offset2}px)` },
{ duration: 500, fill: "forwards" },
);
});
Result