JSFiddle - React, Tailwind, and code Playground
HTML
<div id="a1"></div><div id="a2"></div>
CSS
div { position: absolute; width: 10px; height: 10px; background: gray; }
JavaScript
window.requestAnimationFrame(anim1);
window.setInterval(anim2, 25);
var a1 = document.getElementById('a1');
var a2 = document.getElementById('a2');
var t2 = 0;
function anim1(t1) {
a1.style.left = (50 + Math.cos(t1 / 500) * 30) + 'px';
a1.style.top = (50 + Math.sin(t1 / 500) * 30) + 'px';
window.requestAnimationFrame(anim1);
}
function anim2() {
a2.style.left = (100 + Math.cos(t2) * 30) + 'px';
a2.style.top = (50 + Math.sin(t2) * 30) + 'px';
t2 += 0.055;
}