Alaa Alshofi

this video has the issue I am taking about @GreenSock Screen_Recording_20230520_193807_Chrome.mp4

thank you for you advice. I add the code here https://stackblitz.com/edit/nextjs-dylwzx?file=pages%2Findex.js @GSAP Helper

I was using gsap v3.11.5 and I tried 3.6 and 3.4.2 but same issue. @GreenSock

let panels: HTMLDivElement[] = gsap.utils.toArray('.mobile-section') if (panels && panels.length > 0) { masterTimeLine.current = gsap.timeline({ scrollTrigger: { trigger: sectionRef, pin: true, scrub: 1, snap: 1 / (panels.length - 1), invalidateOnRefresh: true, pinSpacing: false, immediateRender: false, preventOverlaps: true, pinType: 'fixed', anticipatePin: 0, start: 'top top', end: () => '+=' + sectionRef.clientWidth, onEnter: ({end}) => { setScrollTweenEnd(end) }, }, }) masterTimeLine.current.to(panels, { x: '-200vw', ease: 'none', }) ScrollTrigger.create({ trigger: '#experience', containerAnimation: masterTimeLine.current, start: 'top center', end: 'center top', id: '1', onEnter: () => { setCurrentSlider(1) // gsap.to('#experience', {opacity: 1, duration: 0.2}) }, onLeave: () => { // gsap.to('#experience', {opacity: 0.3, duration: 0.2}) setCurrentSlider(2) }, onEnterBack: () => { setCurrentSlider(1) // gsap.to('#experience', {opacity: 1, duration: 0.2}) }, }) ScrollTrigger.create({ trigger: '#ai-powered', containerAnimation: masterTimeLine.current, start: 'top center', end: 'center top', id: '2', onEnter: () => { setCurrentSlider(2) }, onLeave: () => { setCurrentSlider(3) }, onEnterBack: () => { setCurrentSlider(2) }, onLeaveBack: () => { setCurrentSlider(1) }, })