JSFiddle - React, Tailwind, and code Playground

HTML

<div id="information">
    <span id="infodefilante">&nbsp;</span>
</div>

CSS

#information {overflow:hidden;
    position:absolute;
    background-color:orange;
    height:20px;
    width:90%;
    top:100px;
}

#infodefilante {
    position: relative; 
    white-space:nowrap;
    background-color:green;
}

JavaScript

$('#infodefilante').data('bannerscroll', {
    elem: $('#infodefilante'),
    timer: null,
    index:0,
    messages: ['Lorem ipsum.','Nulla facilisi.','Morbi vitae velit.'],
    getMessage:function(){
    if (this.index >= this.messages.length) 
        this.index = 0;
        this.elem.text(this.messages[this.index++]);
    },
    loop: function() {
        this.getMessage();
        this.elem.css('left', this.elem.parent().width()); 
        this.timer = null;
        this.elem.animate({left: -parseInt(this.elem.width(), 10)}, 
            {duration: 30 * (this.elem.position().left + this.elem.width()), 
             easing: 'linear',
         complete:function(){ 
            var data = $(this).data('bannerscroll');
            if (data.stopping) {
                data.stopping = false;
                data.elem.css('left', 0);  
            } else { 
                data.timer = window.setTimeout(function() {             
                    window.clearTimeout(data.timer);
                    data.timer = null;                    
                    data.loop();
                    }, 0);
            }
        }});
    }
});
$('#infodefilante').data('bannerscroll').loop();