JSFiddle - React, Tailwind, and code Playground

by jfriend00

HTML

<div id="middlecolor"></div>

JavaScript

$(document).ready(function(){

    function animateAddText(id, text, delta) {
        var lines = text.split("\n");
        var lineCntr = 0;
        var target = $("#" + id);

        function addLine() {
            if (lineCntr < lines.length) {
                var nextLine = "";
                if (lineCntr != 0) {
                    nextLine = "<br>";
                }
                nextLine += lines[lineCntr++];
                $("<span>" + nextLine + "</span>").hide().appendTo(target).fadeIn(1000);
                setTimeout(addLine, delta);
            }
        }
        addLine();
    }
        
    var multilineText = "First line\nSecond Line\nThird Line\nFourth Line\nFifth Line";
    animateAddText("middlecolor", multilineText, 1000);
    });