JSFiddle - React, Tailwind, and code Playground

by zlud

HTML

<div class="example">
    These are some words that </br> should be faded in one after the other.
</div>
<div class="example">
    No way some words that </br> should be faded in one after the other.
</div>

JavaScript

var $el= $('.example').map(function() {
      return this;
    }).get();

$el.forEach(function (eachdiv){
            
    var  text = $(eachdiv).text(),
    words = text.split(" ");
    var html = "";

    for (var i = 0; i < words.length; i++) {
        html += "<span>" + words[i] + " </span>";
    
            $(eachdiv).html(html).children().hide().each(function(i){
               return $(this).delay(i*500).fadeIn(700);
            });        
        }
    });