glitch_effect.js

const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

let interval = null;

let iteration = 0;

document.querySelectorAll('.glitch-header').forEach(header => {
    header.onmouseover = event => {  

        iteration = 0;
        clearInterval(interval);
        
        interval = setInterval(() => {
          event.target.innerText = event.target.innerText
            .split("")
            .map((letter, index) => {
              if(index < iteration) {
                return event.target.dataset.value[index];
              }
            
              return letters[Math.floor(Math.random() * 26)]
            })
            .join("");
          
          if(iteration >= event.target.dataset.value.length){ 
            clearInterval(interval);
          }
          
          iteration += 1/2;
        }, 25);
      }
})