Create Horizontal Scroll Animation with staggered Text and parallax Image

<style>
    
.scroll-container{
    transition: none;
    overscroll-behavior: none;
    
   /* add the slash and star from code below in case all your settings are fine on mobile. this will overwrite all your settings in the editor*/
    
    display:flex !important; 
    width:100% !important;
    Height: 100vh !important;
    overflow: hidden !important; 
    margin: 0px !important; 
    padding: 0px !important;
}

.scroll-content{
    transition: none;
    overscroll-behavior: none;
    
     /* add the slash and star from code below in case all your settings are fine on mobile. this will overwrite all your settings in the editor*/
     
    display:flex !important; 
    width: 400vw !important; 
    height: 100vh !important; 
  flex-wrap: nowrap !important; 
  gap: 0 !important; 
  flex-direction: row !important; 
  margin: 0 !important; 
  padding: 0 !important; 
}


/* add the slash and star from code below in case all your settings are fine on mobile. this will overwrite all your settings in the editor*/

.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; 
}    
    
</style>



<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 src="https://cdn.jsdelivr.net/npm/split-type@0.3.4/umd/index.min.js"></script>


 <script>
  document.addEventListener("DOMContentLoaded", () => {
    gsap.registerPlugin(ScrollTrigger);

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

    if (!container || !scrollContainer) {
      console.error("Container oder Scroll-Container nicht gefunden. Überprüfe die Klassennamen.");
      return;
    }

    // Timeline for horizontal scrolling and parallax effects
    let scrollTimeline = gsap.timeline({
      scrollTrigger: {
        trigger: scrollContainer,
        pin: true,
        scrub: 1,
        start: "top top",
        end: () => "+=" + container.scrollWidth,
        markers: false,
        invalidateOnRefresh: true,
      },
    });

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

    // Zerlege den Text in Buchstaben
    document.querySelectorAll(".panel .text").forEach((textElement) => {
      new SplitType(textElement, { types: "chars" });
    });

    // Animieren der Buchstaben in jedem Panel
    document.querySelectorAll(".panel").forEach((panel) => {
      const chars = panel.querySelectorAll(".char"); // Buchstaben des Panels auswählen

      if (chars.length > 0) {
        gsap.from(chars, {
          y: 200,
          opacity: 1,
          duration: 2,
          ease: "power1.out",
          stagger: 0.05, // Verzögerung zwischen Buchstaben
          scrollTrigger: {
            containerAnimation: scrollTimeline, // Verknüpfe mit horizontalem Scroll
            trigger: panel,
            start: "left 60%",
            end: "left 30%",
            scrub: true,
            markers: false,
        
          },
        });
      }
    });

    // Animieren der Bilder in jedem Panel
    const panels = gsap.utils.toArray(".panel");
    panels.forEach((section, index) => {
      const images = section.querySelectorAll(".img");

      if (images.length > 0) {
        images.forEach((image) => {
          if (index === panels.length - 1) {
            gsap.from(image, {
              x: "+0",
              opacity: 0.5,
              scale: 0.5,
              ease: "power2.out",
              scrollTrigger: {
                containerAnimation: scrollTimeline,
                trigger: image,
                start: "left 100%",
                end: "left 50%",
                scrub: true,
                invalidateOnRefresh: true,
                markers: false /*{
                  startColor: "green",
                  endColor: "orange",
                  fontSize: "14px",
                  indent: 20,
                },*/
              },
            });
          } else {
            gsap.from(image, {
              x: +200,
              opacity: 0.5,
              scale: 0.5,
              scrollTrigger: {
                containerAnimation: scrollTimeline,
                trigger: image,
                start: "left 100%",
                end: "left 0%",
                scrub: 1,
                invalidateOnRefresh: true,
                markers: false /*{
                  startColor: "blue",
                  endColor: "red",
                  fontSize: "12px",
                  indent: 20,
                },*/
              },
            });
          }
        });
      } else {
        console.warn("Keine Bilder gefunden in:", section);
      }
    });

    // Animation für alle Elemente mit der Klasse "text-two"
    document.querySelectorAll(".text-two").forEach((textElement) => {
      gsap.from(textElement, {
        opacity: 0,
        duration: 1,
        ease: "power1.out",
        scrollTrigger: {
          containerAnimation: scrollTimeline,
          trigger: textElement,
          invalidateOnRefresh: true,
          start: "left 70%",
          end: "left 60%",
          scrub: true,
          markers: false /*{
            startColor: "purple",
            endColor: "yellow",
            fontSize: "20px",
          },*/
        },
      });
    });

    // Animation für das Icon
    gsap.from(".icon", {
      rotation: -90,
      duration: 1,
      scrollTrigger: {
        containerAnimation: scrollTimeline,
        trigger: ".icon",
        start: "left 50%",
        end: "left 40%",
        scrub: 1,
        invalidateOnRefresh: true,
        markers: false /*{
          startColor: "yellow",
          endColor: "green",
          fontSize: "25px",
        },*/
      },
    });

    // ScrollTrigger.refresh() bei Resize
    window.addEventListener("resize", () => {
      ScrollTrigger.refresh(); // Sicherheitsmaßnahme, um Positionen neu zu berechnen
    });
  });
</script>