I've recently had to implement an infinite carousel for a project, with some specific requirements: it had to handle a large number of items, maintaining a consistent spacing between the items despite having different item sizes, and and above all, it had to be performant.
It was quite challenging to implement, and I came across some interesting problems, so I wanted to share my solution in case it helps others.
I built it primarily using Motion (ex Framer Motion) as the main animation library, coupled with use-gesture for handling drag and scroll interactions. While Motion provides these capabilities, I found use-gesture to be more flexible and also more performant for this specific use case.
One of the key features of this implementation is that the carousel is virtualized - it only renders items that currently visible in the viewport (check out the debug mode for a visual demonstration). This approach ensures that the carousel is performant even with a large number of items.
If you want to have a look at the code, check the files on ,
or try it out on the demo below.