JSFiddle - React, Tailwind, and code Playground

by Evan Raskob

HTML

<div id="one">13</div>
<div id="two">10</div>

CSS

#one {
    position:absolute;
    top:50px;
    left:0px;
}
#two {
    position:absolute;
    top:10px;
    left:100px;
}

JavaScript

// randomly move an element every 2500ms

var animateTime = 2500; // in ms
var waitTime = 3000; // in ms
var centerX = 100; // horizontal center of movement
var centerY = 100; // vertical center of movement
var distance = 100;  // distance to move, in pixels


function moveOne() 
{
    // animate the div with id #one to move to top,left
    // of div with id #two in 2500ms
    $('#one').animate({
        top:  centerX + Math.random()*distance - distance/2,
        left: centerY + Math.random()*distance - distance/2
    }, animateTime);
}

setInterval( moveOne, waitTime ); // run the moveOne function every waitTime ms