<style>
    .letter {
      display: inline-block;
      overflow: hidden;
    }
    .letter span {
      display: inline-block;
      transform: translateX(-100%);
    }
</style>

<!-- GSAP and ScrollTrigger CDN scripts -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js"></script>

  <script>
    // Split text into spans for text effect
    function splitTextIntoSpans(selector) {
      const elements = document.querySelectorAll(selector);

      elements.forEach((element) => {
        const text = element.innerText;
        element.innerHTML = "";

        text.split("").forEach((char) => {
          if (char === " ") {
            element.innerHTML += " ";
          } else {
            const span = document.createElement("span");
            span.innerText = char;

            const div = document.createElement("div");
            div.className = "letter";
            div.appendChild(span);

            element.appendChild(div);
          }
        });
      });
    }

    splitTextIntoSpans("h1");

    // Animate text spans
    document.querySelectorAll("h1").forEach((h1) => {
      const spans = h1.querySelectorAll(".letter span");

      gsap.to(spans, {
        x: 0,
        duration: 1,
        ease: "power4.out",
        delay: (index) => Math.random() * 0.5 + 0.25,
        scrollTrigger: {
          trigger: h1,
          start: "top 90%",
          end: "bottom 20%",
          toggleActions: "play none none reverse",
        },
      });
    });
  </script>