Vertical Infinite Scroll

[Hector18 6 Likes (Newbie)]

Hi,

Can anyone tell me how i can achieve this infinite scroll effect with GSAP to translate with ease the elements?

 

Here is the example: https://bizar.ro/

 

Thank you!

See the Pen yLaMomw by Hector18 (@Hector18) on CodePen

[ZachSaucier 7,152 Likes (Superhero)]

Hey Hector. To do this effect you'll have to disable regular scrolling completely and replace it with functionality to translate your elements around (using the wheel event paired with proper swiping detection - perhaps HammerJS can help there). You can see that alternative modes of navigation (such as using the keyboard, middle clicking, etc.) don't work on that website. 

 

As for how to do the translation, this thread can help you get the infinite wrapping logic:

 

[Hector18 6 Likes (Newbie)]

Hi Zach,

Thank you for your answer. I tried to adapt the script for vertical use but I did something wrong. Perhaps you could help me a little bit. Thank you!

 

See the Pen yLaMomw by Hector18 (@Hector18) on CodePen

[ZachSaucier 7,152 Likes (Superhero)]

What seems to be wrong? It seems to work well for me but perhaps I'm missing something.

[Hector18 6 Likes (Newbie)]

Edit: On first time you start dragging the items jumps all above one time their height

 

I've forgot to put the items on position absolute in css, but I solved meanwhile. Now I'll try to implement the hammer js.

Thank you @ZachSaucier for help!