Book a Demo!
CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutPoliciesSign UpSign In
mohamedkhallouq
GitHub Repository: mohamedkhallouq/content
 Path: blob/main/files/en-us/web/api/animation/remove_event/index.md
6532 views
---
title: "Animation: remove event"
slug: Web/API/Animation/remove_event
page-type: web-api-event
browser-compat: api.Animation.remove_event
---

{{ APIRef("Web Animations") }}

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

Syntax

Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.

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

Event type

An {{domxref("AnimationPlaybackEvent")}}. Inherits from {{domxref("Event")}}.

{{InheritanceDiagram("AnimationPlaybackEvent")}}

Event properties

In addition to the properties listed below, properties from the parent interface, {{domxref("Event")}}, are available.

  • {{domxref("AnimationPlaybackEvent.currentTime")}} {{ReadOnlyInline}}

    • : The current time of the animation that generated the event.

  • {{domxref("AnimationPlaybackEvent.timelineTime")}} {{ReadOnlyInline}}

    • : 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

{{Specifications}}

Browser compatibility

{{Compat}}

See also