JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://pakastin.github.io/animationframes/animationframes.min.js"></script>

CSS

ball {
  position: absolute;
  top: 3rem;
  left: 3rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background-color: #000;
}

Babel + JSX

const ball = document.createElement('ball');

document.body.appendChild(ball);

new AnimationFrames({
	delay: 1000, 
  duration: 1250,
  easing: 'bounce',
	onprogress: (e) => {
    ball.style.transform = translate(0, e * 200);
	}
});
  
const translate = (x, y) => {
	return `translate(${x}px, ${y}px)`;
}