JSFiddle - React, Tailwind, and code Playground

HTML

<p style="display:none">This is my
    input source
    for text,
    containing four lines</p>
<ul id="result"></ul>

CSS

.line{ margin-left: -100%; overflow:hidden;height:20px;}

JavaScript

var lines = $('p').text().split("\n");

var timer,
    displayLine = function(){
        var nextLine = lines.shift();
        if(nextLine){
            var newLine = $('<li class="line">' + nextLine + '</li>');
            $('#result').append(newLine);
            newLine.animate({ 'margin-left':0 }, 200);
            timer = setTimeout(displayLine,1000);   
        }
    }
timer = setTimeout(displayLine,1000);