JSFiddle - React, Tailwind, and code Playground

HTML

<body style="background-color:#000;">
	<div id="test" style="position:absolute;top:50%;left:50%;transform:translate(50%,50%);width:20px;height:20px;background-color:#fff;"></div>
</body>

JavaScript

var element = document.getElementById('test');
	var start;	
	
	var minSpeed=1;
	var maxSpeed=5;
	var minPosY=0;
	var maxPosY=250;	
	var thisPosY=50;
	//Полярность
	function invertMe(me,par){
		if(par==true){
			return -me;
		}
		return me;
	}
	//Движение
	function moveMe(speed,pxX,pxY,pos){
		parX=false;
		parY=false;
		if(Math.sign(pxX)==-1){
			parX=true;
			pxX = Math.abs(pxX);
		}
		if(Math.sign(pxY)==-1){
			parY=true;
			pxY = Math.abs(pxY);
		}
		//Шаг
		function step(timestamp){
			if (!start) {
				start = timestamp;
			};
			time=timestamp-start;
			progressX = invertMe(time,parX);
			progressY = invertMe(time,parY);
			var px_x = progressX * speed / 10;
			var px_y = progressY * speed / 10;
			console.log(speed);
			if(px_x>pxX){px_x=pxX;}else if(px_x<-pxX){px_x=-pxX;}
			if(px_y>pxY){px_y=pxY;}else if(px_y<-pxY){px_y=-pxY;}
			element.style.transform = "translate("+px_x+"px,"+px_y+"px)";
			if (invertMe(px_x,parX) < pxX || invertMe(px_y,parY) < pxY){
				requestAnimationFrame(step);
				speed=speed+0.5;
				return;
			}
			console.log("Приехали");
			return;
		}
		requestAnimationFrame(step);
	}
	moveMe(5,0,500);