Keeping the End State

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

fill

What an animation shows before it starts and after it ends: none (nothing), forwards (the end values), backwards (the start values during a delay), both.

filling animation

A finished animation whose fill keeps its end values applied to the element.

commitStyles()

Writes the animation's current values into the element's style attribute as inline styles.

replaceState

active, removed or persisted. An animation becomes removed when a newer animation overrides all its properties.

persist()

Keeps an animation from being removed automatically when a newer one overrides it.

cascade

The rules that decide which style wins. Animations come above normal rules; inline styles come below animations.

1. 1

   Cancel and watch the class take over

   In "The fill trap", press Fade (forwards), then Toggle .low, then Cancel it. In a real run the opacity stayed at 0.6 after the toggle and dropped to 0.3 the moment Cancel was pressed: the class had been applied all along, hidden under the animation.

2. 2

   Make the animation not fill

   In "The fill trap", delete fill: "forwards" from the first animate() call. After finish() the opacity is back to 1 and class .low now works. Without a fill the animation has no effect once it ends. The first line says finished, opacity 1.

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

1. 1

   The problem this solves: el.animate({ opacity: [1, 0] }, 300) fades the element out, and then, at the end, it pops back to full opacity. By default an animation has no effect before it starts or after it ends (fill: "none"). Most people reach for fill: "forwards" and meet three more problems.

2. 2

   The fill trap, part 1: it beats your styles. An animation's value sits above stylesheet rules and inline styles in the cascade. A finished animation with fill: "forwards" is still *filling*, so it still wins: add a class that sets opacity: 0.3 and nothing changes. The example prints class .low says opacity 0.3, computed: 0.6. A :hover rule loses the same way, and the bug looks like a CSS bug.

3. 3

   The fill trap, part 2: they pile up. Every animate() call with a fill adds one more animation to the element, and each one stays alive. Run a hover effect 300 times and 300 finished animations are attached, all holding a value. Browsers do clean up: a finished, filling animation is automatically removed when every property it animates is overridden by a newer animation (replaceState becomes "removed"). The example shows 300 become 1 after a few frames. An animation of opacity *and* transform is not removed by a newer one that sets only transform.

4. 4

   **persist() and removed animations.** Calling persist() on an animation before a newer one replaces it opts that animation out of the clean-up (replaceState becomes "persisted"; the example shows two animations left instead of one). A removed animation still works for commitStyles() (MDN).

5. 5

   The better pattern: commit, then cancel. commitStyles() writes the animation's current values into the element's style attribute as ordinary inline styles. Then cancel() removes the animation. The element keeps the look, there is nothing left in getAnimations(), and the value is a normal style again. The example shows opacity: 0.5; transform: translateX(80px); in the style attribute and 0 animations left. Older browsers needed fill: "forwards" first, so that there was an end state to commit. In headless Chromium 153 a finished animation with no fill committed its end value too, but you cannot feature-test for it, so most code still sets the fill.

6. 6

   What commit does not do. It works on a mid-way animation too: committing at 500 ms of a 1000 ms fade wrote opacity: 0.6. It throws InvalidStateError ("Target element is not rendered") when the element is display: none or detached, because there is nothing to compute. And the committed values are now *inline* styles: they beat your stylesheet rules until you remove them. In the example a class with opacity: 0.9 loses until the style attribute is cleared.

7. 7

   Choosing. No fill for motion that returns to rest (a bump, a flash, the fly-to-cart dot). Commit then cancel when the end becomes the new state (a card that slides into place). fill: "forwards" only when you will cancel it soon. Often best: change a class and let a CSS transition do it (Phase 3).

• You can explain why fill: "forwards" can break a class or hover style

• You can use commitStyles() then cancel() to keep an end state

• You can say what automatic removal is and when persist() matters

• You can name the commitStyles() failure for a hidden element