JSFiddle - React, Tailwind, and code Playground

HTML

<h1 id='root'>
  Test
</h1>

JavaScript

const largeTask = ()=>{
  let a;
  setInterval(()=>{
  	for (let i=0;i<8000000;i++){
      a = i / 150;
    }
  }, 50)
}

const animation = ()=>{
  const ele = document.getElementById('root');
  const maxLength = 30;
  const interval = 30;
  let flag = true;
  let length = 1;
  let start = null;
  
  const animationTask = (timestamp) => {
  	if (!start) start = timestamp;
    if (timestamp - start > interval){
    	ele.style.transform  = `translateX(${length * 10}px)`
      if (length === maxLength){
        flag = !flag;
      } else if (length === 0){
        flag = !flag;
      }
      if (flag){
        length ++;
      } else {
        length --;
      }
      start = timestamp;
    }
    requestAnimationFrame(animationTask);
    
  };
  requestAnimationFrame(animationTask);
};

animation();
largeTask();