JSFiddle - React, Tailwind, and code Playground

JavaScript

(function () {
    var coordinates = [],
        id, left = $('#bigspace').position().left,
        next, f, index = 0,
        NORMAL_SPEED = 180, screenWidth = window.screen.width,
        pause, paused = false, handleKey, togglePause;
    $('.essay').each(function (index, element) {
        coordinates.push({
            left: parseInt(element.style.left, 10),
            width: $(element).width()
        });
    });
    next = coordinates[0];
        
    togglePause = function () {
        if (!paused) {
            pause(); 
        } else {
            f(NORMAL_SPEED);
            paused = false;
        }
    }
    
    
    handleKey = function (e) {
        console.log(e);
        if (e.keyCode === 32) {
            togglePause();
        }    
    };
   
    pause = function () {
        console.log("Pause");
        if (!paused) {
            clearTimeout(id);
            paused = true;
        }
    };
    
    f = function (speed) {
        var timeout = 41,
            x = window.scrollX - left,
            newSpeed = speed * 1.005;
        window.scrollBy(speed, 0); 
        if (x + 100 >= next.left) {
           window.scrollTo(next.left + left - 50, 0);
           pause();
           index += 1;
           next = coordinates[index];
        } else {
            id = setTimeout(f.bind(this, newSpeed), timeout);
        }
    };
    window.scrollTo(0, 0);
    f(NORMAL_SPEED);
    $(document).keyup(handleKey);

})();