JSFiddle - React, Tailwind, and code Playground

by denniswaltermartinez

HTML

<h1 class="word">Hello, World</h1>

<p class="word">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p class="word">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p class="word">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p class="word">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p class="word">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p class="word">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p class="word">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p class="word">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p class="word">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p class="word">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p class="word">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p class="word">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p class="word">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p class="word">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p class="word">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

CSS

.word {
    display: none;
}
.word.active {
    display: block;
}
.letter {
    display: inline;
    font-size: 30px;
    opacity: 0;
    transform: translateY(20px);
    transition: transform 0.4s, opacity 0.4s;
}
.letter.active {
    opacity: 1;
    transform: translateY(0);
}

JavaScript

function Letters() {
    this.letters = [];
    this.create();
    this.render();
    this.activate();
}

Letters.prototype.create = function () {
    this.words = document.getElementsByClassName('word');

    var i = 0,
        l = this.words.length;

    for (; i < l; i++) {
        this.letters.push(this.words[i].innerHTML.split(''));
    }
};

Letters.prototype.render = function () {
    var i = 0,
        l = this.words.length,
        x = 0;

    for (; i < l; i++) {
        for (var x = 0, t = this.letters[i].length; x < t; x++) {
            if (!x) {
                this.words[i].innerHTML = '';
            }

            this.words[i].innerHTML += '<div class="letter">' + this.letters[i][x] + '</div>';
        }
    }
};

Letters.prototype.activate = function () {
    var words = document.getElementsByClassName('word');

    (function trigger(wordIndex) {
        wordIndex = wordIndex || 0;
        
        words[wordIndex].classList.add('active');

        var letters = words[wordIndex].childNodes,
            lettersLength = letters.length;

        (function activate(letterIndex) {
            letterIndex = letterIndex || 0;

            if (letterIndex >= lettersLength) return;

            setTimeout(function () {
                letters[letterIndex].classList.add('active');
                activate(++letterIndex);
            }, 30);
        })();

        if (wordIndex < (words.length - 1)) {
            trigger(++wordIndex);
        }
    })();
};

// instantiate
new Letters();