Infinite scrolling elements - simplified version - vertical

[TrulyNewbie]

 

Hi I tried to make this vertical, I changed all the Xpercent to Ypercent. but it didnt quite work. Is there more work to it than that?

 

I've looked a ton of other threads, but I couldn't seem to find one that would be vertical.

 

I plan to repuprose the code to use it like redis agency

 

Thank you

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

[TrulyNewbie]

I also tried this but It doesnt work once I remove some li and leave only 5.

 

See the Pen vYQLGVj by NewbieRuby (@NewbieRuby) on CodePen

[GreenSock]

Yeah, that's some deep custom logic stuff that's generally beyond the scope of help we can provide for free in the forums. That algorithm is built for more elements - when you drop too low, you start overlapping the tweens in the timeline on themselves, like here: 

rawSequence.fromTo(item, {scale: 0, opacity: 0}, {scale: 1, opacity: 1, zIndex: 100, duration: 0.5, yoyo: true, repeat: 1, ease: "power1.in", immediateRender: false}, time)
    .fromTo(item, {yPercent: 400}, {yPercent: -400, duration: 1, ease: "none", immediateRender: false}, time);

Notice the overall duration of the animation for a particular element is 1 second, and in the loop it must create several tweens like this for the same element (for the infinite looping effect). If that "time" value (the position parameter...the spot where you're inserting the tweens into the timeline) is less than 1 second apart from the last tween of that same element, you've got overlaps where the tweens are fighting for control of the same element, trying to make it go to different values. 

 

Again, this is all deep logic stuff inside the looping. Infinite looping is not a simple thing when you're dealing with a single set of elements. 

 

If you need more help to build something like this, you can contact us about our paid consulting services. Or you can try to tweak the logic in there to accommodate your particular need. If there was a simple/obvious fix that I could see off the top of my head, I'd offer it to you here. But it'd take quite some time to really dig in there and troubleshoot and make sure it fits your requirements for your particular project, etc. 

 

Here's a different helper function we built for vertical infinite loops that might be useful: 

See the Pen MWXPgKm?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Good luck!