How to Create a Horizontal Scroll Effect in WordPress Using Elementor and GSAP

.scroll-container {
    transition: none;
    overscroll-behavior: none;
    display: flex !important;
    width: 100% !important;
    height: 100vh !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

.scroll-content {
    transition: none;
    overscroll-behavior: none;
    display: flex !important;
    width: auto !important;
    height: 100vh !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    flex-direction: row !important;
    margin: 0 !important;
    padding: 0 !important;
}

.panel {
    display: flex !important;
    width: 100vw !important;
    height: 100vh !important;
    flex-grow: 1 !important;
    flex-shrink: 0 !important;
    flex-basis: auto;
    box-sizing: border-box !important;
}

<div class="scroll-container">
    <div class="scroll-content">
        <div class="panel" style="background-color: #ffcc00;">Panel 1</div>
        <div class="panel" style="background-color: #00ccff;">Panel 2</div>
        <div class="panel" style="background-color: #ff6666;">Panel 3</div>
        <div class="panel" style="background-color: #66ff66;">Panel 4</div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>

<script>
  gsap.registerPlugin(ScrollTrigger);

  let container = document.querySelector(".scroll-content");
  let scrollContainer = document.querySelector(".scroll-container");

  // Timeline for horizontal scrolling and parallax effects
  let scrollTimeline = gsap.timeline({
    scrollTrigger: {
      trigger: scrollContainer,   // The element that will trigger the scroll animation
      pin: true,                  // Pins the element, making it fixed while scrolling
      scrub: 1,                   // Syncs the animation with the scroll position
      start: "top top",           // Animation starts when the top of scrollContainer meets the top of the viewport
      end: () => "+=" + container.scrollWidth,  // Sets the end point based on the width of the scroll-content
      markers: false,              // Optional, adds markers to visualize the start and end points for debugging
      invalidateOnRefresh: true   // Refreshes the end position on window resize for responsive adjustments
    }
  });

  // Add a small delay at the start (pause with no movement)
  scrollTimeline.to(container, { x: 0, duration: 0.1 });

  // Add Horizontal Scroll to Timeline
  scrollTimeline.to(container, {
    x: () => -(container.scrollWidth - window.innerWidth) + "px",
    ease: "none"
  });

  // Add a small delay at the end
  scrollTimeline.to(container, { x: () => -(container.scrollWidth - window.innerWidth) + "px", duration: 0.1 });
</script>