Creating an infinite (looping) carousel effect?

#1

I want to create a carousel of avatars in the header (think in the style of Instagram stories) but when it gets to the end of the “list”, it loops back around to the beginning. One way I’ve managed to simulated this is to use drivers to “center X” almost instantly when they move out of view and append it to the end of the carousel.

It works but obviously isn’t super scalable. Does anyone have any tips on how to accomplish this in another way that doesn’t require manually looping?

Thanks!

0 Likes

#2

Here’s a version of an infinite loop for cycling through cards similar to the web tabs on mobile safari. I have them linked to tap events, but you could also set them all to auto transitions. Hope this helps. Let me know if you have questions and I can try to explain.

0 Likes