I've been trying to create an horizontal carousel that has several words scrolling end to end of the screen in a loop. What I've tried is diplucating the phrase in two different divs, to avoid the gap in the animation (otherwise, the phrase goes almost away before it starts from the beginning and looks awful). The problem with this strategy, even though I've tried to delay the 2nd animation by half the time of the first one (for them not to overlap), I see depending on the device, the text overlaps.

In a nutshell, how could I create a proper text carousel (even if it's with JS) like the one I tried, making sure texts don't overlap? https://tucuerpofit.com/testcarousel/