JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box"></div>

CSS

#box {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: red;
}

JavaScript

var panToRandomPlaceSlowly = function() {
    var $box = $('#box');
    
    var x = Math.floor(Math.random()*300);
		var y = Math.floor(Math.random()*400);
		
		var currentX = parseInt( $box.css('left') , 10 );
		var currentY = parseInt( $box.css('bottom'), 10 );
	
		var distX = currentX-x;
		var distY = currentY-y;
	
		var distance = Math.sqrt( distX*distX + distY*distY );
	
		var duration = Math.round(100 * distance);
		
        console.log('Moving from (' + currentX + ', ' + currentY + ') to (' + x + ', ' + y + ') in ' + duration/1000 + ' ms');
    
		$box.animate({
			left: x,
			bottom: y
		}, duration, 'linear', panToRandomPlaceSlowly);
}

panToRandomPlaceSlowly();