JSFiddle - React, Tailwind, and code Playground

by Whre

HTML

<div class="list">stringstringstringstring</div>
<div class="list">stringstringstring</div>
<div class="list">stringstringstringstring</div>

CSS

.list {
    width: 100px;
    overflow: hidden;
    white-space:nowrap;
    height: 15px;
    background-color: red;
    margin: 10px;
}

JavaScript

$(function() {
    for (var i = 0; i < $('.list').length; i++) {
        var this_el = $('.list').eq(i);
        var interval = null;
        
        $(this_el).on("mouseenter",function() {
          var that = $(this);
          var this_indent = 0;
            
          interval = setInterval(function(){
            this_indent--;
              if(this_indent < -150) {
                  this_indent = 100;
              }
            $(that).css('text-indent', this_indent);
          },20);
          $(this).data("interval",interval);
            
        });
        
        $(this_el).on("mouseleave",function() {
            clearInterval($(this).data("interval"));
            $(this).css("text-indent",0);
        });
    }
});