On Scroll slider is not working as expected.

[Mohit Pain]

I tried to create an on-scroll horizontal carousel by nesting it inside a GSAP timeline (tl), but it’s not working. I’ve been attempting this for a while without success. Please help me fix it. and after whole carousel get completed 

 

uncomment these codes in js :

 

    // .to(".black-screen", { visibility: 'visible' })  
    // .to(".ourProjects-wrapper", { bottom: '0%', duration: .5 })

 

These commented codes are incomming animtions.

See the Pen YPXexGO by Mohit-Mishra-the-looper (@Mohit-Mishra-the-looper) on CodePen.

[Rodrigo]

Hi,

 

I've been fiddling with your demo for a bit and I'm having a hard time understanding what should be happening, what is actually happening and what exactly is the issue you're facing.

 

In fact I removed ScrollTrigger from your demo and I can see a layout shift that removes the overflow from the browser. There is a fair chance that this is causing issues because the calculations ScrollTrigger makes don't consider this layout shift. I'd strongly recommend you to remove ScrollTrigger and focus just on the animation, you can use GS DevTools to work on your animation and once the animation works the way you intend add ScrollTrigger to the mix:

https://gsap.com/docs/v3/Plugins/GSDevTools

 

Finally I'd strongly recommend you to not animate properties like top/bottom/left/right, those are likely to create performance issues because they force a browser re-paint on each update which could happen almost 60 times per second.