<div class="container">
  <ul class="loop-area">
  <li>
    <sapn> GSAP GSAP GSAP GSAP GSAP GSAP GSAP </span>
     <sapn> GSAP GSAP GSAP GSAP GSAP GSAP GSAP</span>
   </li>
  <li>
    <sapn> GSAP GSAP GSAP GSAP GSAP GSAP GSAP </span>
     <sapn> GSAP GSAP GSAP GSAP GSAP GSAP GSAP</span>
   </li>
  <li>
    <sapn> GSAP GSAP GSAP GSAP GSAP GSAP GSAP </span>
     <sapn> GSAP GSAP GSAP GSAP GSAP GSAP GSAP</span>
   </li>
</ul>  
</div>

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

.container {
  height: 100vh;
  overflow: hidden;
  max-width: 100%;
}

.loop-area {
  display: inline-block;
  font-family: "Dela Gothic One";
  font-size: 4.5rem;
  color: transparent;               /* 透明字體 */
  -webkit-text-stroke: 1px #2e2e2e; /* 字體邊框樣式 */
  white-space:nowrap;               /* 文字不換行 */
}
li > span {
   display: inline-block;
}

const liEl = document.querySelectorAll('li')

gsap.to(liEl, {
  xPercent: -50,  // 移動 -50%
  duration: 10,   // 時間
  ease: "none",   // 無特效播放 
  repeat: -1     // 無限播放
})