JSFiddle - React, Tailwind, and code Playground

by Eduard Dyckman

HTML

<div id="result">

</div>

CSS

.with-animation {
  animation: appear 0.3s ease-in 1;
}

@keyframes appear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

JavaScript

$(function() {

    $letter1=$("#result");
    var arr1=['I','Z','D','E','L','I','Y','A',' ','I','Z',' ','F','A','R','F','O','R','A'];
    console.log(arr1[0]);
    console.log($letter1.get(0).innerHTML);
    console.log($letter1);

    function start(counter){
        if(counter <= 18){
            setTimeout(function(){
            		const letter = arr1[counter];
                $letter1.append(wrap(letter));
                counter++;
                //console.log(counter);
                start(counter);
            }, 500);
        }
        else {
            $letter1.css("border","1px solid rgb(106 90 205)");
        }
    }
    
    function wrap(letter) {
    	return `<span class="with-animation">${letter}</span>`;
    }
    start(0);


});