Jump to content


Infinite loop using wrap

Recommended Posts

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

Link to comment
Share on other sites

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!

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.