JSFiddle - React, Tailwind, and code Playground

HTML

<div id="echo"></div>
<div id="echo2"></div>
<div id="echo3"></div>

<div id="layer2"></div>

CSS

#layer2 {
    position: absolute;
    top: 60px;
    left: 0px;
    width: 10px;
    height: 10px; background: #33FFCC;
}
/* для плавного ухода за край экрана без прокрутки */
body{
  overflow-x: hidden;
}

JavaScript

var num = 1;
var lim = 0;
var way = 'forward';

var SizeViewPort = document.documentElement.clientWidth;
var block = document.getElementById("layer2");
var left = window.getComputedStyle(block,null).getPropertyValue("left");
    left = left.replace("px", "");
var width = window.getComputedStyle(block,null).getPropertyValue("width");
    width = width.replace("px", "");

var timerId = setInterval(function() {
  
  if(way == 'forward'){
	
      left = +left + +2; 							 
      var css = document.getElementById("layer2"); // получаем блок
      css.style.left = left+'px';
	
	  lim = +left + +width;    // определим предел для двигающегося блока
	  if(lim >= SizeViewPort){ // меняем путь на обратный
		way = 'back';
	  }
  }
  else{
      left = +left - +2;
      var css = document.getElementById("layer2");
      css.style.left = left+'px';
	    if(left <= 0){ way = 'forward'; }
  }

  document.getElementById('echo').innerHTML=SizeViewPort+' '+left;
}, 1); // скорость перемещения


// остановить повторы
setTimeout(function() {
  clearInterval(timerId);
  //alert( 'стоп' );
  document.getElementById('echo').innerHTML='стоп';
}, 11000);