JSFiddle - React, Tailwind, and code Playground

by shamaleyte

HTML

<ul>
    <li>List 1, Line 1</li>
    <li>List 1, Line 2</li>
    <li>List 1, Line 3</li>
</ul>
<ul>
    <li>List 2, Line 1</li>
    <li>List 2, Line 2</li>
    <li>List 2, Line 3</li>
</ul>
<ul>
    <li>List 2, Line 1</li>
    <li>List 2, Line 2</li>
    <li>List 2, Line 3</li>
</ul>

CSS

ul{width:400px;list-style:none;}
li{opacity:0;left:100%;position:relative;}

JavaScript

function AnimateList($listItems, index, callback) {
        if (index >= $listItems.length) {
            $listItems.closest("ul").fadeOut(function() {
                $listItems.css("left","400px").css("opacity",0); //reset
                callback(); //next list
            });
            return;
        }
        
        $listItems.eq(index).animate({left:0, opacity:1}, function() {
            AnimateList($listItems, index+1, callback)
        });
    }
    
    function FadeLists($lists, index) {
        if (index >= $lists.length) index = 0;
        
        var $currentList = $lists.eq(index);
        $currentList.fadeIn(function() {
            AnimateList($currentList.find("li"), 0, function() { FadeLists($lists, index + 1) });
        }) 
    }
    
    var $allLists = $("ul")
    FadeLists($allLists, 0);