Scrolling menu vertical infinite loop

[hayhaydz]

Hey,

 

I'm looking to create a seamless vertical infinite scrolling loop for a menu navigation, my original implementation was done with just vanilla JavaScript by snapping the scroll position back to the start once it had reached the bottom but this method unfortunately was not compatible with iOS so I've had to go back to the drawing board. I've found an example that seems to be using GSAP (https://studiomaertens.com/work) what I'm looking for is any advice on how to get started and any approaches that could be recommended. I've already found some other source material

See the Pen NWzqwgJ by hayhaydz (@hayhaydz) on CodePen

 this I adapted from something I found in this Forum but it doesn't quite work as intended for mobile, the touch response is a little off. My new idea is to adapt this (https://greensock.com/docs/v3/HelperFunctions#loop) to be vertical but it comes with a lot of unnecessary features that I won't need and I will need to deconstruct it to be vertical instead of horizontal.

 

I got something to work from deconstructing the horizontal loop helper, there's still a lot of unnecessary code but it seems to work okay

 

Any kind of help is still appreciated to improve it, thank you!

See the Pen YzvydoM by hayhaydz (@hayhaydz) on CodePen

[Rodrigo]

Hi @hayhaydz and welcome to the GreenSock forums!

 

Hopefully these codepens can provide some inspiration to achieve this.

 

Infinite Horizontal Cards. Not exactly the same but the same principle applies in a different axis:

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

 

Infinite Vertical Repeat with ScrollTrigger:

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

 

Vertical Loop:

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

 

Finally a simpler, less robust approach than the horizontal loop helper function can be using the modifiers plugin:

https://greensock.com/docs/v3/GSAP/CorePlugins/ModifiersPlugin

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

 

Hopefully this are enough to get you started. Let us know if you have more questions.

 

Happy Tweening!

[hayhaydz]

Hey @Rodrigo I appreciate the help!

 

Unfortunately because I need it to be compatible with iOS that rules out any of these Codepens that use the ScrollTrigger plugin and snap the scroll position back to the top once you reach the bottom. I have managed to find a solution that works off of CSS transforms though by deconstructing this helper function (https://greensock.com/docs/v3/HelperFunctions#loop) and making it vertical instead of horizontal. I figured I would share some of the forum topics that I came across from my initial searching just in case someone new comes across this post.

 

The below posts helped me build a picture of what I needed: