Official horizontalLoop helper function - previous/next item doesn't animate properly if first/last item is already partially visible?

[niceandserious]

Hi guys, first off thanks so much for all the awesome work you do! 🙂

I've been using the official horizontalLoop helper function to build a carousel. However, I've noticed that if the last item in the carousel is already partially visible due to the width of the carousel vs the number of items, then clicking the previous/next buttons causes the next item to 'jump' rather than animate, which is understandable as we're translating rather than duplicating elements:  - depending on your screen size you may need to comment out more items.

 

Is there a way of adding a clamping/'toEnd' function that could check for this and partially animate the carousel so it just animates in the rest of the partially visible item?

 

Hope that makes sense, let me know if not!

 

See the Pen VwOddYb by niceandserious (@niceandserious) on CodePen

[Cassie]

Heya!

 

I would say that if your carousel is going to be wider than the number of items, then this likely isn't the right solution and you should probably go with a solution that duplicates elements?

 

But also, I'm afraid this helper function is beyond my understanding, it's @GreenSock's work - so maybe he has an idea or advice?

 

[Rodrigo]

As far as I know the Seamless Loop helper predicates in the fact that all the remainder elements will cover all the available space in it's parent when the first element is out of the view, which is not the case in your images.

 

Honestly IDK how that could be worked around. As Cassie mentions this is something Jack came up with so he would be the one to say the final word on this subject, but if I recall correctly something similar to your situation has popped up in the forums in the past and I believe there is not a lot that can be done without duplicating the elements.

 

Happy Tweening!

[GreenSock]

Right, it's logically impossible to have an element be in two places at once (like if it's halfway off the screen on the left, it can't also be halfway on the screen on the right). The seamless loop helper function is indeed for when there are enough elements to cover the open area.