Don AW

Hi Rodrigo, Thank you so much for your help! I had added the pinSpacing: false after troubleshooting for awhile and just started blindly adding new properties to try and resolve the issue never a good idea.. I also wasn't pinning the parent most element of the animated section so thank you for that insight. Nonetheless, these changes alone didn't resolve the issue. Eventually, I figured out that the parent container on my homepage had flexbox settings applied via the class flex flex-col items-center. These flexbox settings were affecting the layout of my components and, consequently, the behavior of the GSAP scroll animation. Before: export default function Home(){ <div className={`px-4 w-full flex flex-col items-center`}> // Flex Styles Causing the Issue <Hero /> <SectionComponent/> {/* Stylists Section with Horizontal Scroll */} <OurStylists /> <SectionComponent/> <SectionComponent/> <SectionComponent/> <InfiniteBanner /> </div> ); } After: export default function Home(){ <div className={`px-4`}> // Flexbox styles removed <Hero /> <SectionComponent/> {/* Stylists Section with Horizontal Scroll */} <OurStylists /> <SectionComponent/> <SectionComponent/> <SectionComponent/> <InfiniteBanner /> </div> ); } Takeaway - CSS layout settings, such as flexbox, can have a significant impact on the behavior of animations and the layout of elements on the page Thanks again for your help! I'll make sure to use GSAP Context Kind regards, Don

I am working on a Next.js project where I am trying to implement a horizontal scrolling section using GSAP and ScrollTrigger. However, I am facing an issue where the horizontal scrolling animation is not working as expected. The subsequent content scrolls up immediately while the horizontal scroll is occurring. I have been troubleshooting this for quite a while but haven't been able to resolve the issue. I have also noticed that the scroller-start and scroller-end markers are being placed at the top right-hand corner of the screen, which seems incorrect. I have created a simplified version of my setup on StackBlitz to illustrate the issue: https://stackblitz.com/edit/nextjs-7zxyqi?file=components%2FStylists.tsx Here's the relevant code from my project: // Stylists.tsx import React, { useEffect, useRef } from 'react'; import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'; gsap.registerPlugin(ScrollTrigger); const images = [...] const styles = {...} const Stylists: React.FC = () => { const panelsContainerRef = useRef(null); useEffect(() => { const sections = gsap.utils.toArray('.panel'); const sectionWidth = 420; const scrollTween = gsap.to(sections, { xPercent: -100 * (sections.length - 1), ease: 'none', scrollTrigger: { start: 'top top', // Offset start position trigger: panelsContainerRef.current, pin: true, pinSpacing: false, scrub: 1.23, snap: 1 / (sections.length - 1), // end end: () => '+=2000', markers: true, }, }); return () => { scrollTween.kill(); // Kill the GSAP animation ScrollTrigger.getAll().forEach((st) => st.kill()); // Kill all ScrollTrigger instances }; }, []); return ( <div style={styles.myContainer}> <div style={styles.panelsContainer} ref={panelsContainerRef}> <h2 style={styles.headerText}>OUR STYLISTS</h2> <div style={styles.flexContainer}> {images.map((image, index) => ( <section style={styles.panel} className="panel" key={index}> <img src={image.src} alt={`Image ${index + 1}`} style={styles.image} /> <div style={styles.textContainer}> <h4>{image.name}</h4> <p>{image.title}</p> </div> </section> ))} </div> <button>EXPLORE STYLISTS</button> </div> </div> ); }; Attempts to resolve the issue: - Adjusted the start, end, trigger, pin, and other ScrollTrigger configuration options. - Checked the HTML structure and CSS styles. - Utilized the markers option in ScrollTrigger to visualize the trigger points and scroll regions. - Tried simplifying the setup to isolate the problem. - Tried 'gsap.context()' to encapsulate the GSAP animation and ScrollTriggers - Tried 'useIsomorphicLayoutEffect' and 'useLayoutEffect' - Downgraded to gsap version "3.8.0" - Cleared browser cache Additional Information: OS: Ubuntu 22.04.3 LTS Browser: Brave I would really appreciate any insights or suggestions on how to resolve this issue. Thank you!