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>
<div id="finished" hidden>Finished event fired!</div>

JavaScript

function start(opt) {
var player = document.querySelector('div').animate([{
    opacity: 1.0,
}, {
    opacity: 0.1,
}], 1000);
return player;
}

var player = start();

player.onfinish = console.log.bind(console, 'finish');
setTimeout(function() {
    document.querySelector('#canceling').hidden = false;
    player.cancel();
    window.p2 = start(player.timeline);
}, 400);

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


window.p = player;