如何为多个带有相同class的头部元素添加逐字动画效果

感谢Nalin Ranjan提供的帮助！

• 单个头部元素动画演示：代码修改自公开GitHub项目
• 所有头部元素动画演示

我需要为多个头部元素应用相同的逐字动画，现有5个class为fancy1的头部元素，原有仅针对单个元素的动画代码仅对第一个头部生效。
我之前写的单个头部动画实现代码在测试平台暂无法正常运行，你可以通过下方截图看到Las Vegas头部的动画实际运行效果：

const text1 = document.querySelector('.fancy1');
    const strText1 = text1.textContent;
    const splitText1 = strText1.split("");
    text1.textContent = "";

for(let i=0; i<splitText1.length; i++){
    text1.innerHTML += "<span>"+ splitText1[i] + "</span>";
}

let char1 = 0;
let timer1 = setInterval(onTick,150);

function onTick(){
    const span1 = text1.querySelectorAll('span')[char1];
    span1.classList.add('fade');
    char1++;
  

    if (char1 === splitText1.length){
       
        complete1();
        return;
    }
}

function complete1(){
   
    clearInterval(timer1);
    timer1 = null;
}

我尝试给5个头部设置不同的类名——fancy1、fancy2、fancy3、fancy4、fancy5，代码如下：

const text = document.getElementsByClassName(".fancy1");
Split(text)
const text = document.getElementsByClassName(".fancy2");
Split(text)

function Split(text){
const strText = text.textContent;
const splitText = strText.split("");
text.textContent = "";

for(let i=0; i<splitText.length; i++){
   
    text.innerHTML += "<span>"+ splitText[i] + "</span>";
   
}

let char = 0;
let timer = setInterval(onTick,150);
}

function onTick(){
    
    const span = text.querySelectorAll('span')[char];
    span.classList.add('fade');
   
    char++;
  
    if (char === splitText.length){
    
        complete();
        return;
    }
}

function complete(){
   
    clearInterval(timer);
    timer = null;
}

我尝试使用全局变量实现，代码如下：

const window.text = document.getElementsByClassName(".fancy1");
Split()
const window.text = document.getElementsByClassName(".fancy2");
Split()
const window.text = document.getElementsByClassName(".fancy3");
Split()
const window.text = document.getElementsByClassName(".fancy4");
Split()

function Split(){
const strText = (window.text).textContent;
const splitText = strText.split("");
text.textContent = "";

for(let i=0; i<splitText.length; i++){
   
    text.innerHTML += "<span>"+ splitText[i] + "</span>";
   
}

let char = 0;
let timer = setInterval(onTick,150);
}

function onTick(){
    
    const span = text.querySelectorAll('span')[char];
    span.classList.add('fade');
    char++;
    if (char === splitText.length){
       
        complete();
        return;
    }
}
function complete(){
    clearInterval(timer);
    timer = null;
}

我对Nalin Ranjan提供的方案进行了多处调整后，控制台不再报错，但所有动画都没有触发，代码如下：

const headers = document.querySelectorAll('.fancy1');

headers.forEach(text => Split(text));

function Split(text){

const strText = text.textContent;
const splitText = strText.split("");
text.textContent = "";

for(let i=0; i<splitText.length; i++){
   
    text.innerHTML += "<span>"+ splitText[i] + "</span>";
   
}

window.char = 0;
window.timer = setInterval(onTick,1500);
window.text = text
window.splitText = splitText
}

function onTick(){
    
    const span = window.text.querySelectorAll('span')[window.char];
    span.classList.add('fade');
   
    window.char++;
  
  console.log(window.char)
  console.log(window.splitText.length)
    if (window.char === window.splitText.length){

        console.log("is it working?")
    
        complete();
        return;
    }
}

function complete(){
   
    clearInterval(timer);
    window.timer = null;
}

内容的提问来源于stack exchange，提问作者Ross Symonds