JSFiddle - React, Tailwind, and code Playground

HTML

<div id="xml" class="fn_container">
    <ul>
       <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
       <li>Aliquam tincidunt mauris eu risus.</li>
       <li>Vestibulum auctor dapibus neque.</li>
    </ul>
	       
</div>

CSS

#xml {
    background: #333;
    color: #fff;
    font-family: sans-serif;
    overflow: hidden;
    position: relative;
}

ul {
    margin: 0; padding: 0;
    position: relative;
}
ul li {
    display: block;
    float: left;
    margin: 0; padding: 5px;
}

JavaScript

var $ul = $('.fn_container ul');
var containerWidth = $('#xml').outerWidth();
var $children = $ul.children();
var $firstChild = $children.first();
var liWidthTot = 0;

$children.each(function (i, item) {
    liWidthTot += $(item).outerWidth();
});

// Set initial dimensions
$ul.height($firstChild.outerHeight());
$ul.width(liWidthTot);
$ul.css('left', 0);

function animateLeft() {
    $ul.animate({
        left: liWidthTot * -1
    }, {
        duration: (liWidthTot + parseInt($ul.css('left'), 10)) * 10,
        easing: 'linear',
        complete: function () {
            $ul.css('left', containerWidth);
            animateLeft(containerWidth);
        }
    });
}

animateLeft();

//handler
$("#xml").on({
    mouseenter: function(){
        $ul.stop();
    },
    mouseleave: function(){
        animateLeft();
    }
});