Animation.onremove

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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

Specification Status Comment
Web Animations
The definition of 'Animation.onremove' in that specification.
Working Draft Editor's draft.

Browser compatibility

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
onremove
Experimental
Chrome No support No
Notes
No support No
Notes
Notes Currently Chrome Canary only
Edge No support NoFirefox Full support 75IE No support NoOpera No support NoSafari Full support 13.1WebView Android No support NoChrome Android No support No
Notes
No support No
Notes
Notes Currently Chrome Canary only
Firefox Android No support NoOpera Android No support NoSafari iOS Full support 13.4Samsung Internet Android No support No

Legend

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.

See also