Infinite scrolling elements - simplified version

[andsavu 3 Likes (Newbie)]

Hey there!

 

I'm looking to create an infinite/looping horizontal scroll page, and I came across this GSAP Pen:

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

 

it is a bit too much..and I would like to simplify it (no dragging, no transform/animation, no snapping), just a simple looping scroll (list of item separated by some gap, that keep repeating on scroll ).

I attached a codepen in which I started removing part of the code, but I don't understand it enough to make it work. 

 

I found a similar example 

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

 but in this one there's a jump when going from start/end if you go slow enough.

 

I'd appreciate some help here

 

 

 

 

See the Pen ZEjMerj by andrei-savu (@andrei-savu) on CodePen

[GreenSock 18,591 Likes (Superhero)]

We actually built out a helper function to make this a lot easier: 

https://greensock.com/docs/v3/HelperFunctions#loop

 

Does that help? 

[andsavu 3 Likes (Newbie)]

@GreenSock while that's definitely really cool and well documented, I'm having a hard time understanding how can I tie that to Scroll, noticing that it's based on increasing/decreasing currentIndex. 

 

I'm more interested in achieving an infinite loop scroll than having an actual slider. I guess you can call it Freemode (no snapping, no active/current index). 

Maybe using a clone of the list to get there might be a better idea? I'm reconsidering because this seems to be more tricky than I thought, lol.

 

This is what I'm trying to recreate as an idea: https://saintlouvent.com/brandings

 

Any extra guidance would be much appreciated. I'll start digging more into these examples & the documentation.

 

Thanks!

 

 

[GreenSock 18,591 Likes (Superhero)]

There are quite a few ways to do that. Here's one that uses an Observer to respond to wheel/touch/pointer events: 

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

 

Is that sorta what you're looking for? 

[andsavu 3 Likes (Newbie)]

..hah, that is exactly what I was looking for, lol. Thanks a lot @GreenSock, I appreciate you taking the time to build this 

[Juan Llopis 0 Likes (Newbie)]

Hi guys and @GreenSock amazing help you providing here, I want to do the same thing but I want the java to detect different image widths inside the cards array so I can modify from css which img i want to be bigger or smaller but im struggeling to add his feature.

 

I will apreciate any help here, thanks in advantage

[Rodrigo 5,421 Likes (Superhero)]

Hi @Juan Llopis and welcome to the GreenSock forums!

 

This example has elements with different widths, so you can use it for inspiration:

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

 

If you keep having issues let us know and remember to include a minimal demo so we can have a better idea of what the problem is.

Happy Tweening!

[andsavu 3 Likes (Newbie)]

@Juan Llopis maybe I'm missunderstanding, but at least with my request, because there's no active item/snapping, why don't you just use different widths directly on the card element?

 

See the Pen BaPqzvX by andrei-savu (@andrei-savu) on CodePen

 

maybe also try to use vw units to get a perfect viewport mix.

 

// you can then have images either as <img tag with position absolute, width 100%, height 100% and object-fit:cover, or you can use them as background-image

[andsavu 3 Likes (Newbie)]

@GreenSock just noticed this, now that I removed the border-radius.

 

 

is there an easy way to get rid of this half a pixel gap between elements? I see it in both Chrome & Safari.

 

It seems that a negative margin left & right -1px and then a width +=2px does the trick between elements, leaving only a gap between first and last item. I would say that is good enough for me, but please let me know if theres a better way to handle this.

[GreenSock 18,591 Likes (Superhero)]

3 hours ago, andsavu said:

It seems that a negative margin left & right -1px and then a width +=2px does the trick between elements, leaving only a gap between first and last item. I would say that is good enough for me, but please let me know if theres a better way to handle this.

Yeah, that has absolutely nothing to do with GSAP. It's just browser graphics rendering stuff. Annoying, I know. In some cases, adding will-change: transform can help but I don't think it really does in this case. Offsetting your margins is probably best.