Animation.onremove

The Animation interface's onremove property (from the Web Animations API) is the event handler for the remove event. This event is sent when the animation is removed (i.e., put into an active replace state).

Syntax

var removeHandler = animation.onremove;

animation.onremove = removeHandler;

Value

A function to be called to handle the remove event, or null if no remove event handler is set.

Examples

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

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

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

  anim.commitStyles();

  //anim.persist()

  anim.onremove = function() {
    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

Browser compatibility

See also

• Web Animations API
• Animation