// Select all text slides const textSlides = document.querySelectorAll('.text-slide'); // Create the GSAP timeline let timeline = gsap.timeline({ scrollTrigger: { trigger: '.scroller', // Sticky section where text will change start: "top top", // Start when the top of the section hits the top of the viewport end: "+=100%", // Adjust the end point to ensure a smooth scroll experience scrub: true, // Smooth animation based on scrolling pin: true, // Pin the section in place while scrolling pinSpacing: true, // Ensure space is reserved for the pinned section to avoid layout jumps anticipatePin: 1, // Smooth out the pinning transitions to prevent jumps } }); // Set initial visibility of the first text slide gsap.set(textSlides[0], { opacity: 1 }); // Loop over each text slide and set its animation textSlides.forEach((slide, index) => { // Zeige den Text sofort an if (index > 0) { // Nur für die folgenden Texte, der erste ist bereits sichtbar timeline.to(slide, { opacity: 1, // Text sichtbar machen duration: 0, // Sofortiger Wechsel }, index * 1); } // Verberge den Text sofort für alle außer dem letzten if (index < textSlides.length - 1) { timeline.to(slide, { opacity: 0, // Text unsichtbar machen duration: 0, // Sofortiger Wechsel }, (index + 1) * 1); // Synchronisation mit dem nächsten Text } }); // Fixiere die letzte Überschrift für einen Moment am Ende der Scroll-Animation timeline.to(textSlides[textSlides.length - 1], { opacity: 1, // Stelle sicher, dass die letzte Überschrift sichtbar bleibt duration: 1 // Halte den fixierten Zustand für eine Sekunde });