How to create text carousel

I want to create an horizontal carousel that has a phrase or several words scrolling end to end of the screen in a loop.

What I’ve tried is duplicating 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 (even though I’ve tried to delay the 2nd animation by half the time of the first one for them not to overlap), depending on the device, the text still overlaps.

How can I create such cacrousel (with or without JS) making sure texts don’t overlap? https://tucuerpofit.com/testcarousel/

enter image description here