issue help please GSAP horizontal scrolling slider issues with vertical scroll

[CamelCase]

Hello, 

I'm new to the GSAP library, I've been using it for 3 days now and I'm having some difficulties implementing what I want to create. I've read several topics hoping to find a solution to my problem, but I haven't managed to solve it on my own. 

 

To get to the point! I'm trying to make a horizontal scroll slider with several possible user interactions, namely the possibility of dragging elements to scroll, the possibility of scrolling via buttons on the right and left of the screen and finally the possibility of scrolling elements with the mouse wheel. 

 

My slider seems to be synchronized with the vertical scroll, but the latter scrolls even before the element is visible on the screen, which produces a rather confusing effect. Is it possible to freeze my slider so that I can scroll left or right only when the slider is visible on the screen, or when my mouse is over it without taking vertical scrolling into account ? 

I've put together a codePen to give you an idea of what I'm working on and the code I've got so far. 

 

Have a nice day, 

Laura

See the Pen by pen?template=raNqgdy (@pen?template=raNqgdy) on CodePen.

[GSAP Helper]

Howdy! I don't have a lot of time right now to dig into everything here, but I wanted to offer you some quick advice about how to get the most out of these forums...

 

Keep it simple. Don't list a bunch of requirements ("it should ___, and ____, and then also ____ while _____ ..." - that's too difficult to follow). Just pick the very first thing and see if you can make that work. If you get stuck, post one question focused on that one piece, like "how can I pin each section one at a time?" Keep your CodePen focused only on that one piece with as little code/markup as possible. Then once that's answered, move on to your next question/problem. 

 

Baby steps 🙂

 

Before you know it, things will fall into place one at a time.

 

In your minimal demo, explain exactly how to reproduce the problem, like "scroll down to the blue section and notice how it pins before it hits the top of the viewport" for example.

 

Don't worry - this community has got your back when it comes to GSAP-specific questions. I just wanted to provide some pointers on how to help us help you. 

[GSAP Helper]

Also, it looks like you're not really using GSAP tools in your demo - you only use gsap.set() which seems very odd given the fact that it's an animation platform - you're not using any of its animation capabilities. You seem to be doing a ton of the calculations manually via lerp() and requestAnimationFrame() stuff. Have you looked at many of the GSAP demos? Is there a reason you're doing so much manual work instead of leveraging the rich feature set of GSAP? 

[CamelCase]

Hello, 

I redid my code by integrating the scrollTriger Gsap, I think it works to scroll the slider and fix the element when it is visible on the screen. Is it possible to make something more fluid? Is it normal for the gallery to lag slightly when scrolling ?  

See the Pen by pen?template=raNqgdy (@pen?template=raNqgdy) on CodePen.

 

Best regards, 

Laura

[Rodrigo]

Hi,

 

I'm not seeing any lag on that demo you posted . For keeping something fixed in the screen while scrolling you can use pinning:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#pin

 

Maybe this demo can help getting started:

See the Pen YzygYvM by GreenSock (@GreenSock) on CodePen.

 

Also check this Codepen collection:

https://codepen.io/collection/AEbkkJ

 

Hopefully this helps

Happy Tweening!