JSFiddle - React, Tailwind, and code Playground

HTML

<p id="instruct"><button>click to start the animation</button></p>

CSS

#instruct {
    position: absolute;
    top: 2em;
}
div {
    position: absolute;
    left: 0;
    width: 20px;
    height: 20px;
    background: #FF6600;
}

JavaScript

function animLoop( render, element ) {
    var running, lastFrame = +new Date,
        raf = window.mozRequestAnimationFrame    ||
              window.webkitRequestAnimationFrame ||
              window.msRequestAnimationFrame     ||
              window.oRequestAnimationFrame;
    function loop( now ) {
        // stop the loop if render returned false
        if ( running !== false ) {
            raf( loop, element );
            var deltaT = now - lastFrame;
            if ( deltaT < 160 ) {
                running = render( deltaT );
            }
            lastFrame = now;
        }
    }
    loop( lastFrame );
}

var elems = [],
    instruct = document.getElementById( "instruct" );
instruct.onclick = function() {
    if ( !elems.length ) {
        instruct.innerHTML = "Switching between tabs won't create any wormhole.";
        animLoop(function( deltaT ) {
            var i,
                elem;
        
            elem = document.createElement( "div" );
            document.body.appendChild( elem );
            elems.push( [ elem, 0 ] );
        
            i = elems.length;
            while ( i-- ) {
                elems[i][0].style.left = ( elems[i][1] += 10 * deltaT / 50 ) + "px";
                if ( elems[i][1] > 400 ) {
                    document.body.removeChild( elems[i][0] );
                    elems.splice( i, 1 );
                }
            }
        });
    }
};