JSFiddle - React, Tailwind, and code Playground

HTML

<p id="output"></p>
	<div id="container" >
		<p id="animated_circle"></p>
	</div>

CSS

#container{
            border: 1px solid gray;
            background-color: rgb(236, 225, 225);            
            height:60px;
			padding:0px;			
		}            
        #animated_circle{
			height: 35px;
			width: 35px;
			margin:10px;
			background-color: rgb(103, 74, 184);
			border-radius: 50%;
			display: inline-block;
        }		        
		#output{
            border: 1px solid gray;
            background-color: rgb(236, 225, 225);
            padding: 20px;
            height:20px;
            width: 60px;
        }

JavaScript

let output = document.getElementById('output');
      let animated_circle = document.getElementById('animated_circle');
      let number = 0;               // number in box
      let xpos = 1;                 // new horizontal position
      let multiplier = 1
	  let animationRequest = null;

      const myContainer = document.querySelector('#container');
      const screen_width = myContainer.offsetWidth -50; 

	  
	  
      function move(timmy) {
	  
	  console.log("timmy: " , timmy);
        if (timmy) {
			let diff = timmy - number;
			number = timmy; 							//highResTimeStamp
		}
		
        // if on screen 
        if (xpos < screen_width && xpos > 0) {        // position < width
            number++;             
        }
		else{
			// when we get to end of screen , then exit function
			return;
		}
        
        console.log(xpos,screen_width); 
				 
        xpos = xpos + (5);               // horizontal position
    	
		// move on X-Axis
		animated_circle.style.transform = `translateX(${xpos}px)`;        
        output.textContent = number;
        animationRequest = window.requestAnimationFrame(move);
      }
      
      animationRequest = window.requestAnimationFrame(move);