<h1 class=“typewrite”>

<a id="typewrite" href="" class="typewrite">
<span class="wrap" id="wrap"></span>
</a>

</h1>

<script>

function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

if (!window.matchMedia( "(hover: none)" ).matches) {
    $(".nav-icon").on({
        mouseenter: function () {
            new TxtType($("#typewrite"), $("#wrap").html(), $(this).attr("data-typewrite")).type();
        },
        mouseleave: function () {
            new TxtType($("#typewrite"), $("#wrap").html(), "").wipe();
        }
    });
} else {
    $( document ).ready(function() {
        var t = 500;
        var nLoops = 0;
        while (nLoops < 5) {
            $('.nav-icon').each(function(i, obj) {
                delay(t).then(() => $(obj).addClass("active"));
                delay(t+500).then(() => new TxtType($("#typewrite"), "", $(obj).attr("data-typewrite")).type());
                delay(t+2500).then(() => new TxtType($("#typewrite"), $("#wrap").html(), "").wipe());
                delay(t+2500).then(() => $(obj).removeClass("active"));
                t += 2500;
            });
        nLoops += 1;
        };
    });
}

var TxtType = function(el, startTxt, endTxt) {
    this.el = el;
    this.txt = startTxt;
    this.endTxt = endTxt;
};

TxtType.prototype.type = function() {
    if (this.txt.length < this.endTxt.length) {
        this.txt = this.endTxt.substring(0, this.txt.length + 1);
        this.el.html('<span class="wrap blinking-cursor" id="wrap">'+this.txt+'</span>');
    } else {
        return;
    };
    var that = this;
    setTimeout(function() {
        that.type();
    }, 50);
};

TxtType.prototype.wipe = function() {
    if (this.txt.length) {
        this.txt = this.txt.substring(0, this.txt.length - 1);
        this.el.html('<span class="wrap blinking-cursor" id="wrap">'+this.txt+'</span>');
    } else {
        this.el.html('<span class="wrap" id="wrap">'+this.txt+'</span>');
        return;
    };
    var that = this;
    setTimeout(function() {
        that.wipe();
    }, 20);        
};

</script>