JSFiddle - React, Tailwind, and code Playground

by andyw_

HTML

<div class="container">
    <div class="balloon"></div>
</div>

CSS

.container { 
    position: relative; 
    width: 100%; 
    height: 600px; 
}

.balloon { 
    position: absolute;
    width: 40px; 
    height: 40px; 
    border: 1px solid #333; 
    background: red; 
    border-radius: 50%;
    bottom: 600px;
}

JavaScript

var balloon = document.getElementsByClassName("balloon")[0];

var style = window.getComputedStyle(balloon);
var bottom = parseInt(style.getPropertyValue('bottom'), 10);
console.log(bottom);

var dropBall = function() {
    var newBottom = bottom - 10 <= 0 ? 0 : bottom - 10;
    balloon.style.bottom = newBottom + 'px';
    console.log(newBottom);
    bottom = newBottom;
    if(bottom > 0) {
        setTimeout(dropBall, 1000/60);
        console.log("timeout");
    }
}

dropBall();