JSFiddle - React, Tailwind, and code Playground

by Margus Martsepp

HTML

<ul class="ticker">
		<li>Margus</li>
		<li>see</li>
		<li>on</li>
		<li>kena</li>
	</ul>

CSS

.ticker
{
    text-align: right;
    list-style-position: inside;
    text-decoration: none
}
ul { overflow: hidden; margin: 0; padding: 0;
  list-style-type: none; border: 1px solid #ddd;background: #eee;}

li { float: left; margin-bottom: 0;  
   line-height: 1;  padding:6px;}

a { padding: 0.25em 0.5em; display: block; border: none; }

JavaScript

function ticker(){
        var tickitem = $('.ticker li:first')
        var w = $(tickitem).width();
        setTimeout(function(){ 
            $(tickitem).animate({ width: '0' }, '500');
        }, 200);
        setTimeout(function(){ 
            $(tickitem).hide(200);
        }, 500);
        setTimeout(function(){ 
            $(tickitem).appendTo($('.ticker'));
            $(tickitem).show(200);
            $(tickitem).animate({ width: w+'px' }, '500');
        }, 800);
	}
	setInterval(function(){ ticker() }, 3000);