JSFiddle - React, Tailwind, and code Playground

by THEtheChad

HTML

<div id="dot1"></div>
<div id="dot2"></div>

CSS

#dot1 {background:red}
#dot2 {background:blue}
div {height:20px;width:20px;border-radius:50%;position:absolute}

JavaScript

var dot1 = document.getElementById('dot1'),
    dot2 = document.getElementById('dot2'),
    pos = 0,
    animate1 = function(time){
        pos += time/1000;
        dot1.style.left = 50 + Math.sin(pos) * 20 + '%';
        dot1.style.top = 50 + Math.cos(pos) * 20 + '%';
    },
    animate2 = function(time){
        dot2.style.left = 50 + Math.cos(pos) * 20 + '%';
        dot2.style.top = 50 + Math.sin(pos) * 20 + '%';
    };

(function(w){
    var frame = w.requestAnimationFrame       || 
                w.webkitRequestAnimationFrame || 
                w.mozRequestAnimationFrame    || 
                w.oRequestAnimationFrame      || 
                w.msRequestAnimationFrame     || 
                function( callback ){
                    w.setTimeout(callback, 1000 / 60);
                },
        q = [],
        lastFrame,
        loop = function(timeStamp){
            var i = q.length,
                // date instance is a fallback for setTimeout
                thisFrame = timeStamp || +new Date(),
                deltaT = thisFrame - lastFrame;

            // Do not render frames if too much time has ellapsed
            if(deltaT < 160)
                // Loop through all of our animations
                while(i)
                    // If an animation returns falsy, remove it from the queue
                    if(q[--i](deltaT) == 0)
                        q.splice(i,1);
            
            // If there are still animations in the queue, continue to loop
            if(q.length){
                lastFrame = thisFrame;
                frame(loop);
            }
        };
    
    // public API
    // @input function( msBetweenFrames //integer )
    w.MANimate =  function(cb){
        // Add animation to the queue
        // If this is the first animation, kickstart the loop
        if(q.push(cb) == 1){
            lastFrame = +new Date();
            frame(loop);
        }
    };
})(window);

window.MANimate(animate1);
window.MANimate(animate2);