JSFiddle - React, Tailwind, and code Playground

by Ralph Echter

HTML

<div class="scroll-box">
    <div class="scroll-text">This is the text that is too long to fit in the box</div>
</div>

CSS

.scroll-box {
    width: 100px;
    height: 1.2em;
    overflow: hidden;
    position: relative;
}
.scroll-text {
    position: absolute;
    white-space: nowrap;
}

JavaScript

$(document).ready(function () {
	    $('.scroll-box').mouseenter(function () {
	        $(this).stop();
	        var boxWidth = $(this).width();
	        var textWidth = $('.scroll-text', $(this)).width();
	        if (textWidth > boxWidth) {
	            var animSpeed = textWidth * 20;
	            $(this).animate({
	                scrollLeft: (textWidth - boxWidth)
	            }, animSpeed, function () {
	                $(this).animate({
	                    scrollLeft: 0
	                }, animSpeed, function () {
	                    $(this).trigger('mouseenter');
	                });
	            });
	        }
	    }).mouseleave(function () {
	        var animSpeed = $(this).scrollLeft() * 10;
	        $(this).stop().animate({
	            scrollLeft: 0
	        }, animSpeed);
	    });

	});