fade-text/lib/fade-text.js

Simple letter-by-letter fading text effect

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var FadeText = /** @class */ (function () {
    function FadeText() {
    }
    FadeText.prototype.applyAnimation = function (elementId) {
        var element = document.getElementById(elementId);
        element.innerHTML = this.divideLettersToSpans(element);
        this.fade();
    };
    FadeText.prototype.fade = function () {
        var spans = document.querySelectorAll('span[class^=anim]');
        var indexes = [];
        for (var i = 0; i < spans.length; i++) {
            indexes[i] = i;
        }
        var helperArr = this.shuffle(indexes);
        var time = 0;
        var _loop_1 = function () {
            var index = helperArr[0];
            spans[index].style.transition = 'all .5s';
            time += 250;
            setTimeout(function () {
                spans[index].style.opacity = '0';
            }, time);
            helperArr.shift();
        };
        while (helperArr.length > 0) {
            _loop_1();
        }
    };
    FadeText.prototype.divideLettersToSpans = function (element) {
        var textNode = element.childNodes[0];
        if (textNode.nodeValue === null) {
            throw new Error('Element not found');
        }
        return textNode.nodeValue
            .split('')
            .map(function (l, i) {
            if (l === ' ') {
                l = '&nbsp;';
            }
            return "<span class=\"anim-" + i + "\">" + l + "</span>";
        })
            .join('');
    };
    FadeText.prototype.shuffle = function (a) {
        var _a;
        for (var i = a.length - 1; i > 0; i--) {
            var j = Math.floor(Math.random() * (i + 1));
            _a = [a[j], a[i]], a[i] = _a[0], a[j] = _a[1];
        }
        return a;
    };
    return FadeText;
}());
exports.default = FadeText;