Animation: remove event

The remove event of the Animation interface fires when the animation is removed (i.e., put into an active replace state).

Syntax

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

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

Event type

Event 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

In our simple replace indefinite animations demo, you can see the following code:

const divElem = document.querySelector("div");

document.body.addEventListener("mousemove", (evt) => {
  const anim = divElem.animate(
    { transform: `translate(${evt.clientX}px, ${evt.clientY}px)` },
    { duration: 500, fill: "forwards" }
  );

  anim.commitStyles();

  //anim.persist()

  anim.onremove = (event) => {
    console.log("Animation removed");
  };

  console.log(anim.replaceState);
});

Here we have a <div> element, and an event listener that fires the event handler code whenever the mouse moves. The event handler sets up an animation that animates the <div> element 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 overriding forward filling animations.

A console message is logged each time an animation it removed, invoked when the remove event is fired.

Specifications

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

Browser compatibility

BCD tables only load in the browser

See also