JSFiddle - React, Tailwind, and code Playground

by mariomc

HTML

<div id="red"></div>
<button type="button" onclick="expensiveFunction()">Calculate</button>

CSS

#red {
  background-color:red;
  border-radius: 100%;
  position:absolute;
  top:100px;
  left:0px;
  width:10px;
  height:10px;
  transform: translateX(-10px);
}

JavaScript

/*
The idea is when we click calculate the animation does not block
*/
let count = 0;
/*
when you click on calculate
if 1e9 doesn't block the animation try a higher value
if it blocks too long, try a smaller one
*/
var target = 1e9;

function expensiveFunction() {
   for (let i = 0; i <= target; i++) {
      count++;
   }
   console.log(count);
}

// ball animation
(function () {
   const el = document.querySelector("div");
   const step = el.animate(
      [{ transform: `translateX(0)` }, { transform: `translateX(100vw)` }],
      {
         duration: 5000,
         iterations: Infinity
      }
   );
   step.play();
})();