GSAP Horizontal Scroll play only once, and add next & prev button to control slider

[sandy120]

Hello nice people of GSAP,

Forgive me for poor English please.😅😅 My mother tongue is Chinese.

I'm a new user for learning how to use GSAP in my project. 
And now encountered  some problems in using GSAP to make a horizontal scroll slider.
 

I'm looking for methods to complete these effects below：
1. When scroll down, slider go horizontal scroll only once time. If scroll back, stop the horizontal scroll effect.
2. Add next and prev button to switch slider by pure JS. (Sorry for that I don't tend to use GSAP Club Plugins, I'm trying to complete it by open source and free )

I tried using the attribute "once: true", but the next/prev button and anchor button not working.
And when scroll back this will leave white space on the top.
Please tell me how to fix it, thanks for kind people.😇😇
This is the demo I write on codepen：

See the Pen abRGEZP by lin-hsienli (@lin-hsienli) on CodePen

[Rodrigo]

Hi @sandy120 and welcome to the GreenSock forums!

 

Normally we don't provide help with custom logic but this was a bit of a fun challenge and didn't consumed a lot of time.

 

I wasn't able to follow what you are doing on your code so instead I created a custom example from scratch:

See the Pen QWZxbWr by GreenSock (@GreenSock) on CodePen

 

The logic is quite simple. Just create a ScrollTrigger controlled instance, when that instance gets to the end point, remove all the pin space, toggle a boolean (more on this later) and set the animation to the end. At the same time create the methods for the buttons (these methods wont work with the initial value of the boolean I mentioned before. Then the slier can be controlled with the prev and next buttons. You can do the same with the buttons at the top (I didn't had the time to add that functionality now, but I hope to come back to this example and add that as well), use the ScrollTo Plugin if the ScrollTrigger is not done, otherwise use the method for moving the slides.

 

Hopefully this helps.

Happy Tweening!

[sandy120]

Hi @Rodrigo ~
Thanks for your help !!  I will try to refer to your code.