How to create shuffle/scramble text effect in Elementor

<script>
  const letters = "010101010101";
  const words = ["HELLO", "WORLD"]; // Define the two words you want to alternate between
  let currentIndex = 0;

  document.addEventListener("DOMContentLoaded", () => {
    const h1 = document.querySelector("p");

    const startShuffling = () => {
      let iteration = 0;
      const originalValue = words[currentIndex];
      currentIndex = (currentIndex + 1) % words.length; // Switch to the next word
      const nextValue = words[currentIndex];

      const interval = setInterval(() => {
        h1.innerText = originalValue
          .split("")
          .map((letter, index) => {
            if (index < iteration) {
              return nextValue[index];
            }

            return letters[Math.floor(Math.random() * letters.length)];
          })
          .join("");

        if (iteration >= originalValue.length) {
          clearInterval(interval);
          startShuffling(); // Start shuffling the next word
        }

        iteration += 1 / 3;
      }, 40);
    };

    startShuffling(); // Trigger shuffling animation on page load
  });
</script>

<script>
  const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

  document.addEventListener("DOMContentLoaded", () => {
    const originalTexts = new Map(); // To store the original text of each element

    const startShuffling = event => {
      const element = event.target;
      if (!element.matches('h1, .elementor-button-text')) return;

      if (!originalTexts.has(element)) {
        originalTexts.set(element, element.innerText);
      }

      const originalText = originalTexts.get(element);
      let iteration = 0;
      const originalValue = element.innerText;
      let timeout = null;

      clearTimeout(timeout);

      timeout = setTimeout(() => {
        clearInterval(interval);
        element.innerText = originalText; // Restore original text
      }, 2000); // Increase timeout for a slower animation

      const interval = setInterval(() => {
        element.innerText = originalValue
          .split("")
          .map((letter, index) => {
            if (index < iteration) {
              return originalValue[index];
            }
            return letters[Math.floor(Math.random() * 26)];
          })
          .join("");

        if (iteration >= originalValue.length) {
          clearInterval(interval);
          element.innerText = originalText; // Restore original text
        }

        iteration += 1 / 6; // Decrease iteration speed for a smoother animation
      }, 10); // Increase interval duration for slower animation
    };

    // Use event delegation to handle mouseover events on the document
    document.addEventListener('mouseover', startShuffling);

    // Apply the effect to elements already on the page
    document.querySelectorAll('h1, .elementor-button-text').forEach(element => {
      element.addEventListener('mouseover', startShuffling);
    });
  });
</script>

<script>
  const letters = "010101010101";

  let timeout = null;

  document.addEventListener("DOMContentLoaded", () => {
    const h1 = document.querySelector("p");
    const originalText = h1.innerText;

    const startShuffling = () => {
      let iteration = 0;
      const originalValue = h1.innerText;

      clearTimeout(timeout);

      timeout = setTimeout(() => {
        clearInterval(interval);
        h1.innerText = originalText; // Restore original text
      }, 2000);

      const interval = setInterval(() => {
        h1.innerText = originalValue
          .split("")
          .map((letter, index) => {
            if (index < iteration) {
              return originalValue[index];
            }

            return letters[Math.floor(Math.random() * 26)];
          })
          .join("");

        if (iteration >= originalValue.length) {
          clearInterval(interval);
          h1.innerText = originalText; // Restore original text
        }

        iteration += 1 / 3;
      }, 40);
    };

    h1.addEventListener("mouseover", startShuffling);

    startShuffling(); // Trigger shuffling animation on page load
  });
</script>

.elementor-button {
    display: inline-block;
    width: 120px; /* Set a fixed width */
    text-align: center; 
    overflow: hidden; /* Prevent overflow */
    white-space: nowrap; /* Prevent text from wrapping */
  }