JSFiddle - React, Tailwind, and code Playground

by Mert Ener

HTML

<!DOCTYPE html>
<html>
<head>
<title>gravity fall</title>
</head>
<body>
<div id="dot"></div>
</body>
</html>

CSS

#dot {
  position: absolute;
  height: 25px;
  width: 25px;
  background-color: #777;
  border-radius: 50%;
  display: inline-block;
}
body {
  background-color: #999;
}

JavaScript

var ball = document.getElementById('dot'),
    gravity = -9.8 * 1,
    finalVelocity = 100,
    time = 0;
 
launch = setInterval(function() {
  ball.style.bottom = (finalVelocity * time + gravity * time * time / 2) + 1 + "px";
  time += 0.25;
  if (parseInt(ball.style.bottom, 10) < 1) { 
    finalVelocity = finalVelocity * 0.8;
    ball.style.bottom = time = 0;
    if (finalVelocity < 3.6) {
      clearInterval(launch);
    }
  }
}, 25);