JSFiddle - React, Tailwind, and code Playground

by Adam Kinnucane

HTML

<div class="wrapper">
<div class="box move-1">

</div>
<div class="box move-2">

</div>
</div>

CSS

.box {
	width: 50px;
	position: absolute;
	bottom: 0;
}

.move-1 {
	background: red;
	height: 100px;
}

.move-2 {
	background: blue;
	height: 70px;
    left: 10%;
}

.wrapper {
width: 500px;
height: 500px;
position: relative;
margin-left: 20%;
}

JavaScript

function randomly_animate_object_height(){
	var $objects = $(".box");
		var options = 
		{ height: {
			  min: 125,
			  max: 250,
			  unit: 'px'
			}
		 }
	setInterval(function(){
		var random_index = Math.floor(Math.random() * $objects.length);
		$objects.eq( random_index ).animate({	  height:get_random_int(options.height.min,options.height.max, options.height.unit)
		}, {
		  duration: "slow"
		});
	}, 400);
}

function get_random_int (min, max, unit) {
    return Math.floor(Math.random() * (max - min + 1)) + min + unit;
}

randomly_animate_object_height();