JSFiddle - React, Tailwind, and code Playground

by Travis Almand

HTML

<div id="panel">
  <button id="slow">slow</button>
  <button id="medium">medium</button>
  <button id="fast">fast</button>
</div>

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

CSS

:root {
  --speed: 0;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
  display: grid;
  place-items: center;
}

#box {
  aspect-ratio: 16 / 9;
  border: 3px solid rebeccapurple;
  overflow: hidden;
  position: relative;
  height: 300px;
}

.player {  
  animation: move calc(var(--speed) * 1s) linear infinite;
  background: green;
  height: 30px;
  left: 60%;
  offset-anchor: left center;
  offset-path: path("M 0 0 c 200,0 200,390 0,390");
  offset-rotate: 0deg;
  position: absolute;
  top: -30px;
  transform: translate3d(-50%, -50%, 0);
  width: 100px;
}

@keyframes move {
  from {
    offset-distance: 0%;
  }

  to {
    offset-distance: 100%;
  }
}

JavaScript

var slowButton = document.querySelector('#slow');
var mediumButton = document.querySelector('#medium');
var fastButton = document.querySelector('#fast');
var box = document.querySelector('#box');

function clickSpeed(s) {
	box.style.setProperty('--speed', s);
}

slowButton.addEventListener('click', () => {
	clickSpeed(3);
})
mediumButton.addEventListener('click', () => {
	clickSpeed(2);
})
fastButton.addEventListener('click', () => {
	clickSpeed(1);
})