JSFiddle - React, Tailwind, and code Playground

by vvv vvvv

HTML

<ul class="box">
    <li>Un peu de texte</li>
    <li>Encore</li>
    <li>Toujours plus de texte</li>
    <li>Petite ligne</li>
</ul>

CSS

.box {
    margin: 0;
    padding: 0 10px;
    width: 50%;
    background-color: rgba(0, 0, 0, .05);
    overflow: hidden;
}
.box > li {
    list-style: none;
    padding: 10px 0;
    
    -webkit-transition: margin-top 0.5s ease-out;
    transition: margin-top 0.5s ease-out;
}

JavaScript

function magicBox(target,interval) {

    if (target) {
        
        if(!interval) {
            interval = 3000;
        }


        var box = $(target),
            y = 1,
            boxChildren = box.children(),
            boxChildrenLength = box.children().length,
            boxHeight = (function () {
                var height = [0,0];

                for (var i = 0; i < boxChildrenLength; i++) {
                    var current = $(boxChildren[i]),
                        largerChild = [current.height(),current.innerHeight()];
                    if( largerChild > height ) {
                        height[0] = largerChild[0];
                        height[1] = largerChild[1];
                    }
                }

                return height;
            })(),
            box_firstChild = box.children().first();
        
        box.css('height',boxHeight[1] + 'px');
        boxChildren.css('height',boxHeight[0] + 'px');

        setInterval(function() {
            
            var newValue = -( y * boxHeight[1] );
            if( y < boxChildrenLength ) {
                box_firstChild.css('margin-top', newValue + 'px');
                y++;
            }
            else if( y === boxChildrenLength ) {
                box_firstChild.css('margin-top', 0);
                y = 1;
            }         
            
        }, interval);

    } else {
        alert('fail');
    }
}

magicBox(".box");