<h3>Web Animation API Scrubbing Example (<a href="http://www.javascriptkit.com/javatutors/web-animation-api-tutorial.shtml" target="_new">Tutorial</a>)</h3>
<p>Drag the Range Slider to Control Animation:</p>

<div id="box"></div>

<input id="scrubber" type="range" min="0" max="1" step="0.01" value="0" />

#box{
	width: 100px;
	height: 100px;
	background: red;
}

input[type="range"]{
  width: 90vw;
}

var boxframes = [
	{ 
		transform: 'translateX(0)',
		background: 'red',
		borderRadius: 0
	},
	{ 
		transform: 'translateX(45vw) scale(.5)', 
		background: 'orange',
		borderRadius: 0
	},
	{
		transform: 'translateX(90vw)',
		background: 'green',
		borderRadius: '50%'
	}
]

var boxref = document.getElementById("box")
var scrubber = document.getElementById("scrubber")
var animationlength = 3000
var reqanimationreference
var boxanimation = boxref.animate(boxframes, {
    duration: animationlength,
    fill: 'both',
    easing: 'ease-in'
})

function updateScrubber(){
    cancelAnimationFrame(reqanimationreference)
    scrubber.value = boxanimation.currentTime/animationlength
    reqanimationreference = requestAnimationFrame(updateScrubber)
}

scrubber.addEventListener('mousedown', ()=>{
    boxanimation.pause()
    updateScrubber()
})

scrubber.addEventListener('mouseup', ()=>{
    boxanimation.play()
})

scrubber.addEventListener('input', ()=>{
    boxanimation.currentTime = scrubber.value * animationlength
})

updateScrubber()

boxanimation.onfinish =(()=>{
  cancelAnimationFrame(reqanimationreference)
  scrubber.value = animationlength/animationlength
})