JSFiddle - React, Tailwind, and code Playground

HTML

<div class="title">
  <span></span>
</div>
<div class="list">
  <span>Очень длинный текст для прокрутки</span>
  <span>Просто длинный текст</span>
  <span>Короткий текст</span>
</div>

CSS

.title{
  width:150px;
  height:20px;
  border:1px solid #000;
  overflow:hidden;
  text-align:center;
}
.title span{
  position:relative;
  white-space:nowrap;
  left:0px;
  transition:left 0s 0s linear;
}
.list{
  
}
.list span{
  display:block;
  cursor:pointer;
}

JavaScript

$(function(){
	$('.list span').on('click',function(){
  	$('.title span').html($(this).text());
    title(0);
  });
	$('.title span').get(0).addEventListener('transitionend',function()
	{
		title();
	});
	title(0);
});
function title(left)
{
	var title_span = $('.title span');
	var title_width = $('.title').width();
	var title_span_width = $(title_span).width();
	var s = 1;
	if(left == undefined)
	{
		if(title_width < title_span_width)
		{
			left = title_width - title_span_width;
			s = (title_span_width - title_width) / 10;
		}
		else
		{
			left = 0;
			s = 0;
		}
		if(left+'px' == $(title_span).css('left')) left = 0;
		$(title_span).css({'left':left+'px','transition':'left '+s+'s 3s linear'});
	}
	else
	{
		$(title_span).css({'left':left+'px','transition':'left 0s 0s linear'});
		title();
	}
}