Animation: remove event
=======================

Baseline 2022
-------------

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

* Learn more
* See full compatibility
* Report feedback
The **`remove`** event of the `Animation` interface fires when the animation is automatically removed by the browser.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener('remove', (event) => { })
onremove = (event) => { }
```

Event type
----------

An `AnimationPlaybackEvent`. Inherits from `Event`.

Event

AnimationPlaybackEventEvent properties
----------------

*In addition to the properties listed below, properties from the parent interface, `Event`, are available.*

`AnimationPlaybackEvent.currentTime` Read only 

The current time of the animation that generated the event.

`AnimationPlaybackEvent.timelineTime` Read only 

The time value of the timeline of the animation that generated the event.

Examples
--------

### Removing replaced animations

In this example we have a `<button id="start">` element, and an event listener that runs whenever the mouse moves. The `mousemove` event handler sets up an animation that animates the `<button>` to the position of the mouse pointer. This could result in a huge animations list, which could create a memory leak. For this reason, modern browsers automatically remove forwards-filling animations that are overridden by other animations.

The number of animations created is displayed. A `remove` event listener is used to count and display the number of animations removed as well.

All but one of the animations should eventually be removed.

#### HTML


```html
<button id="start">Click to drag</button>
<br />
<button id="reset">Reset example</button>
<p>
  Click the button to start the animation (disabled by default to protect those
  who suffer migraines when experiencing such animations).
</p>
<p>Animations created: <span id="count-created">0</span></p>
<p>Animations removed: <span id="count-removed">0</span></p>
```


#### CSS


```css
:root,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

button {
  margin: 0.5rem 0;
}
```


#### JavaScript


```js
const button = document.querySelector("#start");
let created = 0;
let removed = 0;

button.addEventListener(
  "click",
  () => {
    document.body.addEventListener("mousemove", (event) => {
      const animation = button.animate(
        { transform: `translate(${event.clientX}px, ${event.clientY}px)` },
        { duration: 500, fill: "forwards" },
      );
      created++;
      showCounts();

      // the remove event fires after the animation is removed
      animation.addEventListener("remove", () => {
        removed++;
        showCounts();
      });
    });
  },
  { once: true },
);

function showCounts() {
  document.getElementById("count-created").textContent = created;
  document.getElementById("count-removed").textContent = removed;
}

const reset = document.querySelector("#reset");
reset.addEventListener("click", () => {
  document.location.reload();
});
```


#### Result

Specifications
--------------

| Specification |
| --- |
| Web Animations # dom-animation-onremove |
| Web Animations # remove-event |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Web Animations API
* `Animation`, `AnimationPlaybackEvent`
* `Animation.replaceState`, to check whether an animation has been removed
* `Animation.persist()`, to prevent removal of an animation