JSFiddle - React, Tailwind, and code Playground

Scroller left jittery

by Dave

HTML

<div class='marquee'>
<div class='marquee-text'>Testing this marquee function</div></div>
</div>
<div class='marquee'>
<div class='marquee-text'>Testing</div></div>
</div>
<div class='marquee'>
<div class='marquee-text'>Testing this marquee</div>
</div>
<!--linker = '<div class="marquee" style="width:'+perc+'"><div class="marquee_text">'+mtxt+'</div></div>&nbsp'-->

CSS

div.marquee {
    white-space:no-wrap;
    overflow:hidden;
width:50%;
}
div.marquee > div.marquee-text {
    white-space:nowrap;
    display:inline;
    width:auto;
}

JavaScript

var marquee = $('div.marquee');
marquee.each(function() {
    var mar = $(this),indent = mar.width();
    mar.marquee = function() {
        indent--;
        mar.css('text-indent',indent);
        if (indent < -1 * mar.children('div.marquee-text').width()) {
            indent = mar.width();
        }
    };
    mar.data('interval',setInterval(mar.marquee,1000/60));
});