JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <button id="teste">
  Clique aqui
  </button>
</body>

CSS

span {
  height: 75px;
  width: 75px;
  border-style: solid;
  border-radius: 50%;
  display: inline-block;
  position: fixed;
}

JavaScript

let aux = 1;
let count = 0;
teste.onclick = function() {
		var html = '<span id="dot'+count+'" class="teste"></span>' 
    $('body').append(html);
		var width = $(document).width();
    var height = $(document).height();
    if(aux == 1){
    	var max = width * 0.20;
      var min = 1;
    } else {
    	var max = width;
      var min = width * 0.8;
    }
    aux = aux * -1;
    var x = Math.floor(Math.random()*(max - min + 1) + min);
      $( "#dot"+count ).animate({
    			left: x,
          bottom: '20px'
  }, 0, function() {
  });
	animate({
  	duration:4000,
    timing: function(timeFraction) {
    	return Math.pow(timeFraction, 5)
    },
    draw: function(progress) {
    	$(".teste").css('bottom', progress * 80 + '%');
    }
  });
  $("#dot"+count).fadeOut(4500, function(){
    $(this).remove();
  })
  count++;
}



function animate({timing, draw, duration}){
	let start = performance.now();
  requestAnimationFrame(function animate(time) {
    // timeFraction goes from 0 to 1
    let timeFraction = (time - start) / duration;
    if (timeFraction > 1) timeFraction = 1;

    // calculate the current animation state
    let progress = timing(timeFraction)

    draw(progress); // draw it

    if (timeFraction < 1) {
      requestAnimationFrame(animate);
    }
		
  });
}