Landing page GSAP & Elementor ep. 8

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/SplitText.min.js"></script>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    // Split footer heading into characters
    const split = new SplitText(".footer-heading", { type: "chars" });

    gsap.from(split.chars, {
      y: 50,
      opacity: 0,
      stagger: 0.08,
      duration: 0.6,
      ease: "power2.out",
      scrollTrigger: {
        trigger: ".footer-heading",
        start: "top 50%",   // trigger as soon as the heading touches viewport
        once: true,         // run only once
        // toggleActions: "play reverse play reverse", 
        // markers: true
      }
    });
  });
</script>