JSFiddle - React, Tailwind, and code Playground

by Juha Lindstedt

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 { frames, ease } = animationframes;

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

document.body.appendChild(ball);

frames(1000, 1250)
	.progress(t => {
		const e = ease.bounce(t);
    ball.style.transform = translate(0, e * 200);
	})
  
const translate = (x, y) => {
	return `translate(${x}px, ${y}px)`;
}