Infinite roller

[xoxoxoxo]

I'm trying to achieve an effect like this, the panels auto roll but also are controllable from mouse scroll.

 

I've tried to re-create this using the wrap() function however there is always a "gap" between. Also, I had to turn off `autoRefresh` flag because it was resetting every time it repeated.

 

How do I fix the gap and How do I also control it from the mouse?

See the Pen BaLNMeq?editors=1010 by nullhoooook (@nullhoooook) on CodePen

[ZachSaucier]

Hey nullhook.

 

Most likely you will need to pause any animation of the content while the user scrolls. Then start it again once scrolling has scrolled. You probably want to listen for the wheel event and, if you want to support touch devices, either use draggable or something like HammerJS to add touch support. 

 

Unfortunately we don't have the capacity to debug projects like this for free. Or maybe someone else who is able to help out will stop by.

 

If you have a question about GSAP itself we're happy to help!

[xoxoxoxo]

Got it. I think I can figure out the wheel event.

However, why does my wrap function gives a gap between the panels? It doesn't look seamless.

[ZachSaucier]

It's doing what you're telling it to do. Perhaps you want something like gsap.utils.wrap(-totalWidth, innerWidth).

[xoxoxoxo]

I still get the same result as before: 

See the Pen abmOrXZ?editors=1010 by nullhoooook (@nullhoooook) on CodePen

 

[ZachSaucier]

As I said before, it's a logical issue that we don't have time to investigate for free.

[GreenSock]

Yep, it's a logic thing. You're using one repeating tween and the same modifier for everything but you actually have your elements staggered in various positions on the x-axis, thus you must adjust for that. In other words, the very first element could wrap when it hits -window.innerWidth, but the second element would have to wait until 2 * -window.innerWidth, etc. 

 

Here's an option: 

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