JSFiddle - React, Tailwind, and code Playground

by Akkuma

HTML

<div id="container">
    <h1 class="invisible">a</h1>
    <h1 class="invisible">a</h1>
    <h1 class="invisible">a</h1>
    <h1 class="invisible">a</h1>
    <h1 class="invisible">a</h1>
</div>

CSS

.invisible { visibility: hidden; }

JavaScript

$(document).ready(function() {
    var ts = [
            $('<h1>Text1</h1>')
       ,    $('<h1>Text2</h1>')
       ,    $('<h1>Text3</h1>')
       ,    $('<h1>Text4</h1>')
       ,    $('<h1>Text5</h1>')
       ,    $('<h1>Text6</h1>')
    ]
    ,  counter = 0
    ,  $container = $('#container');

    function nextStep() {          
            var $h1ToRemove = $container.find('.invisible').last()
            ,  $appendToh1 = $h1ToRemove.prev();
            $container.find('.invisible').last().remove();  
            ts[++counter].hide().insertBefore(ts[counter - 1]).fadeIn(Math.random()*3000)
            if (counter !== ts.length - 1) {
                ts[counter].promise().done(nextStep);  
            }
    }
    function start() {
        ts[0].hide().appendTo("#container").fadeIn(Math.random()*3000);
        ts[0].promise().done(nextStep);
    }
    
    start();
});