Scrolling Cards horizontally with GSAP and ScrollTrigger (continuous snap)

[Mark32]

Hi All, i have recently started using gsap. it is so great. i am using it with a react project but for minimal demo i have used js only, i found one demo in gsap's examples. i am trying to achieve same but  without infinite loop it should iterate all the items only once. so i am not sure that should i use this loop helper function or it can be achieved without it.

anyway i have modify code a bit and it is working as expected but only issue is if cards are less than 14 i doesn't work properly means what i want is it to iterate all items once only but if cards are less, it start iterating from 0 for few cards again. i am not sure where we can make changes so it work with dynamic number of cards. (currently it doesn't work if only few cards are there,  less than 14)

 

JFYI, this is how screen is

- section

- horizontal scroll with pin (cards should loop for only one iteration)

- section

Thanks in advance :)

See the Pen rNEpEee by mark32-the-decoder (@mark32-the-decoder) on CodePen.

[Mark32]

Hi,

 

Can anyone help ?  
 

[Rodrigo]

Hi,

 

Yeah this is a bit of a complicated situation. The code you're trying to use is highly customized for a very specific purpose so using it under different circumstances would require to put quite some time in it. Unfortunately we don't have the time resources to tackle complicated tasks like this in these free forums.

 

Perhaps you could take a look at our Horizontal Loop helper function and use ScrollTrigger to scrub it with a specific value, like this:

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

 

Hopefully this helps

Happy Tweening!

[Mark32]

Okay Thanks for the help anyway. i will try to find something. for now i am keeping this open. if i found anything i will post it here.
 

[Mark32]

Hi 

it is working fine now.
I have updated the code and clean the things which was not need in this case and added few comments in it as well, just in case someone check this out.

FYI: codepen is same only (attached at first post) 

Thanks