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;
        }

JavaScript

class AnimatedCircle {

	output;
    animated_circle;
    number;
    xpos;
    multiplier;
	animationRequest;
    myContainer;
    screen_width; 

	constructor(val_1, val_2) {
		this.val_1 = val_1;  // example of passing values
		this.val_2 = val_2;
				
		this.animated_circle = document.getElementById('animated_circle');
		this.number = 0;      
		this.xpos = 1;                 // new horizontal position
		this.multiplier = 1
		this.animationRequest = null;
		this.myContainer = document.querySelector('#container');
		this.screen_width = this.myContainer.offsetWidth -50; 
	}
	
	// test method
	test_method() {
		return `${this.val_1} says hello.`;
	}
	
    moveBall() {
	  // if on screen 
	   console.log("got here!");
        if (this.xpos < this.screen_width && this.xpos > 0){ 
            this.number++;             
        }
		else{
			// when we get to end of screen , then exit function
			return;
		}
		
		this.xpos = this.xpos + (5);    // horizontal position
    	
		
		// move on X-Axis
		animated_circle.style.transform = `translateX(${this.xpos}px)`;        
        console.log("loop");
		animationRequest = window.requestAnimationFrame(this.moveBall());
      }

	  
	  
	
}
// instantiate class
myAnimatedCircle = new AnimatedCircle('Bob','Level22');
// call method
console.log(myAnimatedCircle.test_method());
console.log(myAnimatedCircle.moveBall() );