Stop looping text from breaking

Question

I have a looping text which I got from here CSS Scrolling Text Loop. The only issue is after a given time (specified as 5s in css), the loop breaks and starts over but it seems to jump instead of it just looping without any delay/jump. I tried adding a animation-delay hoping it would stop that break but it didn't work. Any ideas how I can fix this?

HTML

<section class="home-text-loop">
 <div class="loop-outer">
   <div>
     <div class="loop-text">
       <div class="loop-content">&nbsp;Hello World&nbsp;&middot;         
     </div>
    </div>
   </div>
 </div>
</section>

CSS

 .loop-outer {
   overflow: hidden;
   margin-top: 1rem;
 }

.loop-outer div {
  display: inline-block;
}

.loop-text {
  white-space: nowrap;
  animation: loop-anim 5s linear infinite;
  animation-delay: 0.1s;
  font-size: 5rem;
  font-weight: 800;
  color: #fff;
  background: var(--matte-black);
}

@keyframes loop-anim {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: -50%;
  }
}

JavaScript

let outer = document.querySelector('.loop-outer');
let content = outer.querySelector('.loop-content');

repeatContent(content, outer.offsetWidth);

let el = outer.querySelector('loop-text');
el.innerHTML = el.innerHTML + el.innerHTML;

function repeatContent(el, till) {
  let html = el.innerHTML;
  let counter = 0; // prevents infinite loop

  while (el.offsetWidth < till && counter < 100) {
    el.innerHTML += html;
    counter += 1;
  }
}