I am trying to create an infinite carousel on my own using React + TypeScript. So far, I've managed to get the infinite loop working after many hours, and now I am stuck on getting it to transition / animate nicely.

I've been looking around to find solutions, but I'm stuck on the aspect of when and when not to transition, using onTransitionEnd, and on how to reset the transform along the slide track. I realize that appending/prepending elements is probably part of the issue as well.

I've created a (very) crude working demo on this CodeSandbox here.

In terms of the transition itself, I'm just trying to get a nice, smooth left/right motion. Any help / tips / suggestions would be greatly appreciated!

Thanks!