How to build a hero experience on load with Elementor & GSAP

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script>
document.querySelectorAll(".hero_wrap").forEach((heroWrap) => {
  const heroMask = heroWrap.querySelector(".hero_mask");
  const heroImg = heroWrap.querySelector(".hero_img");
  const heroTxt = heroWrap.querySelector(".hero_txt");

  const tl = gsap.timeline({ defaults: { duration: 1, ease: "power2.inOut" } });

  tl.set(heroMask, { opacity: 1 });
  tl.from(heroMask, { y: "100vh" });
  tl.from(heroImg, { y: "-100vh" }, "<");
  tl.fromTo(
    heroMask,
    { clipPath: "inset(calc(50% - 20vw) calc(50% - 20vw) round 1.25rem)" },
    { clipPath: "inset(calc(0% - 0vw) calc(0% - 0vw) round 1.25rem)" }
  );
});




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

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

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

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

          element.appendChild(div); // Append the span-wrapped letter
        }
      });
    });
  }

  // Execute the split and animation on page load
  window.addEventListener("load", () => {
    // Split the text into spans
    splitTextIntoSpans("h1");

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

      // GSAP animation
      gsap.fromTo(
        spans,
        { x: 100, opacity: 0 }, // Start state
        {
          x: 0, // End state
          opacity: 1,
          duration: 1,
          ease: "power4.out",
          stagger: { amount: 1 }, // Stagger animation
        }
      );
    });
  });
</script>

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