JSFiddle - React, Tailwind, and code Playground

by mgiuffrida

HTML

<script src="https://rawgit.com/web-animations/web-animations-js/master/web-animations-next.min.js"></script>
<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();
}, 100);

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