JSFiddle - React, Tailwind, and code Playground

by mgiuffrida

HTML

<div>Animate me!</div>
<div id="canceling" hidden>Canceling...</div>
<div id="canceled" hidden>Canceled event fired!</div>

JavaScript

var player = document.querySelector('div').animate([{
    opacity: 1.0,
}, {
    opacity: 0.1,
}], {
    duration: 2000,
});

setTimeout(function() {
    document.querySelector('#canceling').hidden = false;
    player.cancel();
}, 1000);

player.addEventListener('cancel', function() {
    document.querySelector('#canceled').hidden = false;
});