GSAP Infinite Scrolling Horizontal Slider w/ Different Widths

[Something Strange]

Hi all, I've tried my best to find a solution before submitting a potential duplicate question...

 

I forked an incredible pen from Fabio Ottaviani and simplified my version a bit more for demo purposes.

 

All works well initially, but if you uncomment the CSS lines 62-64 (making even nth-children skinnier), things break, ha.

 

In my JS, I'm setting the widths of each item (and the new wrapper total width) in my window resize event. I thought in the dispose function, specifically in the gsap set x, I would use the current item's width with the index in the array of widths, and then in the modifiers x, I would need to use the negative last item's width and first item's width to get the correct wrap, but I'm obviously not doing that right.

 

Any suggestions would be much appreciated! Thank you for your help and time.

See the Pen ZERByWK by something-strange (@something-strange) on CodePen

[Rodrigo]

Hi @Something Strange and welcome to the GreenSock forums!

 

You could try the Horizontal Loop helper function and see how that works:

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

 

You can check the examples and see which one fits your needs better.

 

Let us know if you have more questions.

 

Happy Tweening!

[Something Strange]

Thanks @Rodrigo, appreciate the link!

 

Looking at these examples, they seem to have way too many options and configurations, hah. I think the idea I have in place with the gsap.utils.wrap is close, I need to find a way to get the width of the previous or next siblings width kind of like this: 

 

Or do you think this will just not work with dynamic widths?

 

Oh, I could maybe group all of my items as one big set and clone that twice so I have a previous, current and next set all width the same widths, but that might be a bit off excess rendering for the DOM out of the viewport...

 

Just typing out loud, I'll mess around with this more and provide any updates.

 

Thanks again!

[Something Strange]

Hi all,

 

I ended up solving my own problem (for now at least) by grouping my "items" or "columns" into a set. With this approach, I can add 1 or many blocks within a column, and the number of columns will make a set. Now I just made a clone of the set to ensure the two sets will be wider than the window screen / viewport.

 

Cleaned up the JS, my window resize event only needs the width of the one set, and the total width is just the set width * number of sets, in this case, only 2.

 

Similar to Fabio's original Codepen demo, but now we can have our set built with any range of widths:

 

See the Pen eYKBypL by something-strange (@something-strange) on CodePen