Vertical Infinite Scroll Issue

[pbj]

I've attempted to review other forums and while I see how the solution was created in the other codepens. What I'm not sure about is *why* its working and that seems to be my missing piece for the infinite looping vertical images I'm attempting to create. 

 

Effectively copied the codepen from 10/5/21 and it works but i cannot figure out how to get the loop to occur seamlessly without any particular jumping. 

 

 

 

See the Pen mdKRYxp?editors=0010 by pbj (@pbj) on CodePen

[GreenSock]

Seamless looping is not an easy thing. You really need to work through all the logic and understand how it works.

 

You're starting out with a set of images that are at various positions on the screen but all have a "y" transform of 0, but you're creating an animation that assumes they natively were all directly on top of each other but spaced out using "y" offsets so that the wrapping point would be identical for them all. It's a totally different strategy/logic if you're letting them sit in the normal document flow spaced out (rather than with transforms). Using the native spacing, you'd have to figure out a different wrapping point for each. For example, the top image may only have to move 200px before it wraps, but the bottom image may have to move 800px before wrapping. 

 

Another problem is that an element cannot be 2 places at once. Your images all fit exactly inside the viewport, so imagine what should happen while the top image is "leaving". Let's say it's halfway off the screen...if you want it to "seamlessly loop" in this scenario, you'd start seeing that same element coming in from the bottom! So you'd have to create a DUPLICATE element if you want to make that look right. 

 

It can get quite complex, honestly. It's all very doable, but you've gotta build out all the logic. We've got a helper function in the docs for a horizontally looping group of elements so you are welcome to use that as inspiration but I'll warn you that it's rather complicated and you may have a hard time understanding all the code. 

 

If you need some help building that, you can contact us for paid consulting services (it's beyond the scope of help we can provide in these free forums), or you can post in the "Jobs & Freelance" forum to see if someone else can help (for hire).  

 

Thanks for being a Club GreenSock member! 💚