Emoji typewriting animation via pure JavaScript cause rendering

// ES6 Class
class TypeWriter {
constructor(txtElement, words, wait = 3000) {
this.txtElement = txtElement;
this.words = words;
this.txt = ”;
this.wordIndex = 0;
this.wait = parseInt(wait, 10);
this.type();
this.isDeleting = false;
}

type() {
// Current index of word
const current = this.wordIndex % this.words.length;
// Get full text of current word
const fullTxt = this.words[current];

// Check if deleting
if(this.isDeleting) {
// Remove char
this.txt = fullTxt.substring(0, this.txt.length – 1);
} else {
// Add char
this.txt = fullTxt.substring(0, this.txt.length + 1);
}

// Insert txt into element
this.txtElement.innerHTML = `<span class=”txt”>${this.txt}</span>`;

// Initial Type Speed
let typeSpeed = 300;

if(this.isDeleting) {
typeSpeed /= 2;
}

// If word is complete
if(!this.isDeleting && this.txt === fullTxt) {
// Make pause at end
typeSpeed = this.wait;
// Set delete to true
this.isDeleting = true;
} else if(this.isDeleting && this.txt === ”) {
this.isDeleting = false;
// Move to next word
this.wordIndex++;
// Pause before start typing
typeSpeed = 500;
}

setTimeout(() => this.type(), typeSpeed);
}
}

// Init On DOM Load
document.addEventListener(‘DOMContentLoaded’, init);

// Init App
function init() {
const txtElement = document.querySelector(‘.txt-type’);
const words = JSON.parse(txtElement.getAttribute(‘data-words’));
const wait = txtElement.getAttribute(‘data-wait’);
// Init TypeWriter
new TypeWriter(txtElement, words, wait);
}
@import url(‘https://fonts.googleapis.com/css?family=Raleway:300,400′);
/* https://css-tricks.com/snippets/css/typewriter-effect/ typewritting effect */

:root{
–header-height: 2rem;
–h2-font-size: 1.25rem;
–normal-font-size: .938rem;
font-family: Raleway;
color: rgb(42, 42, 42);
}

.nav__logo {
overflow: hidden;
position: relative;
}

a {
text-decoration: none;
color: rgb(42, 42, 42);
}
<div>
<a href=”#” class=”nav__logo”><b>@alexpoov </b></a>
<span class=”nav__logo txt-type” data-wait=”3000″ data-words='[“🌻”, “🤹”, “✌”, “💻”, “☔”, “🎹”, “📸”, “🤙”]’>
</span>
</div>