Infinite loop using wrap

[nicolaseielll 9 Likes (Newbie)]

Im trying to create a scrub image slider and I would need it to be infinite. Im trying to wrap the slide to the end of the array using gsap.utils.wrap every time it passes the border of the slider (when it is hidden) but I cannot get it to work. Could someone help me with this?

 

Here's a simple demo: https://codesandbox.io/s/wonderful-monad-sohfp8?file=/pages/index.vue

[GreenSock 16,923 Likes (Superhero)]

Yeah, that's a logic issue in your code - each of the elements would wrap at a DIFFERENT x value because you've got them all set up in the normal document flow, thus even though they have an "x" of 0, they aren't all stacked on top of each other. So imagine the one that's on the far right side...it may only need to move 120px before it wraps all the way back to a negative x position before the start which may be something like -920, for example. The one that starts out on the far left may need to go 480px to the right before it wraps, and it'd wrap to maybe -120. See the issue? 

 

This is one of the reasons why I created the helper function in the docs for seamlessly looping on the x-axis. It simplifies something that's somewhat complex for most people to work through. 

 

You could simplify things a bit in your demo by making all the elements position: absolute, stacking them on top of each other initially and then position them using "x" so that they all have a common point of reference. So the one on the far right may start out with an x of 480, for example (instead of 0 - you're using transforms to space things out rather than the normal document flow). Then all your wrapping would occur at the same spots. 

 

If you still need some help, I'd strongly recommend isolating things into a very simple CodePen or CodeSandbox. No Vue, no ScrollTrigger, nothing except a few colored <div> elements and just get  your seamless looping squared away before you start adding in all the extra stuff. You'll definitely increase your chances of getting a solid answer in the forums if you provide a minimal demo with only the bare minimum to show the issue. 

 

Good luck!

[nicolaseielll 9 Likes (Newbie)]

Very good explanation! Thank you for this. I'll take a look at the helper function!

[nicolaseielll 9 Likes (Newbie)]

I have one problem: if I wanted to scrub the slider with ScrollTrigger, what do I put to the x:  in the gsap.to() object ? I tried the loop.next() which is used by the click event but that did not have any effect.

 

A hint is enough so I'll try to figure the rest by my self so I don't bother you too much.

[Cassie 4,220 Likes (Superhero)]

That's going to be a challenge because the slider is infinite and the scroll isn't.

This article goes into a lot of detail

https://css-tricks.com/going-meta-gsap-the-quest-for-perfect-infinite-scrolling

And this is the thread that inspired the article