JSFiddle - React, Tailwind, and code Playground

HTML

<div id="redbox"></div>
<button id="coolbutton">click</button>

CSS

#redbox {
  background: red;
  height: 50px;
  width: 50px;
}

JavaScript

const redbox = document.querySelector("#redbox");
redbox.style.width = `50px`;
const coolbutton = document.querySelector("#coolbutton");
coolbutton.addEventListener("click", animator);
let toggle = true;
function animator() {
  let poller = setInterval(function(){
    let w = parseInt(redbox.style.width, 10);
    toggle ? w++ : w--;
    redbox.style.width = w + 'px';
    if (w == 100 || w == 50){
      toggle = !toggle;
      clearInterval(poller);
    }
    if (w == 80)
      log(redbox.style.width);
  }, 20);
} 

function log(args){
  console.log(args);
}