<section class="cloneable">
    <div class="looping-words">
      <div class="looping-words__containers">
        <ul data-looping-words-list="" class="looping-words__list">
<li class="nba-intro__item"><p class="nba-intro__name">LeBron James</p></li>
<li class="nba-intro__item"><p class="nba-intro__name">Stephen Curry</p></li>
<li class="nba-intro__item"><p class="nba-intro__name">Kevin Durant</p></li>
<li class="nba-intro__item"><p class="nba-intro__name">Giannis Antetokounmpo</p></li>
<li class="nba-intro__item"><p class="nba-intro__name">Luka Dončić</p></li>

        </ul>
      </div>
      <div class="looping-words__fade"></div>
      <div data-looping-words-selector="" class="looping-words__selector">
        <div class="looping-words__edge"></div>
        <div class="looping-words__edge is--2"></div>
        <div class="looping-words__edge is--3"></div>
        <div class="looping-words__edge is--4"></div>
      </div>
    </div>
</section>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script>
    
    // ------- Osmo [https://osmo.supply/] ------- //

document.addEventListener('DOMContentLoaded', function() {
  const wordList = document.querySelector('[data-looping-words-list]');
  const words = Array.from(wordList.children);
  const totalWords = words.length;
  const wordHeight = 100 / totalWords; // Offset as a percentage
  const edgeElement = document.querySelector('[data-looping-words-selector]');
  let currentIndex = 0;
  function updateEdgeWidth() {
    const centerIndex = (currentIndex + 1) % totalWords;
    const centerWord = words[centerIndex];
    const centerWordWidth = centerWord.getBoundingClientRect().width;
    const listWidth = wordList.getBoundingClientRect().width;
    const percentageWidth = (centerWordWidth / listWidth) * 100;
    gsap.to(edgeElement, {
      width: `${percentageWidth}%`,
      duration: 0.5,
      ease: 'Expo.easeOut',
    });
  }
  function moveWords() {
    currentIndex++;
    gsap.to(wordList, {
      yPercent: -wordHeight * currentIndex,
      duration: 1.2,
      ease: 'elastic.out(1, 0.85)',
      onStart: updateEdgeWidth,
      onComplete: function() {
        if (currentIndex >= totalWords - 3) {
          wordList.appendChild(wordList.children[0]);
          currentIndex--;
          gsap.set(wordList, { yPercent: -wordHeight * currentIndex });
          words.push(words.shift());
        }
      }
    });
  }
  updateEdgeWidth();
  gsap.timeline({ repeat: -1, delay: 1 })
    .call(moveWords)
    .to({}, { duration: 2 })
    .repeat(-1);
});
    
</script>