How to create an amazing horizontal hero experience with GSAP in Elementor

<!-- Add GSAP and ScrollTrigger JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>

<script>
  gsap.registerPlugin(ScrollTrigger);

  document.addEventListener("DOMContentLoaded", function () {
    // ScrollTrigger for horizontal scrolling behavior
    ScrollTrigger.create({
      trigger: ".horizontal-scroll",      // The horizontal scrolling section
      start: "top top",                   // When to start scrolling
      end: "+=1000px",                    // The duration of the scroll (adjust as necessary)
      pin: true,                          // Pin the section
      scrub: 1,                           // Smooth scroll with scrub
      onUpdate: (self) => {
        // Translate the .horizontal-panel by progress of the scroll
        gsap.to(".horizontal-panel", {
          x: `${-100 * self.progress}vw`,  // Move horizontally based on scroll progress
          duration: 0.5,
          ease: "power3.out",              // Smooth easing for the transition
        });
      },
    });
  });
</script>

/*add this CSS code to the parent container*/

.horizontal-scroll {
    transition: 0s;
    overscroll-behavior: none;
}

/*add this CSS code to the child container*/

.horizontal-panel {
     transition: 0s;
}