<section>
  <div class="marquee" data-marquee-duration="30">
    <div class="marquee__inner">
      <div class="marquee__content">But I must explain to you how all this mistaken idea of denouncing pleasure and praising.</div>
    </div>
  </div>
  
  <div class="marquee" data-marquee-duration="20">
    <div class="marquee__inner">
      <div class="marquee__content">But I must explain to you how all this mistaken idea of denouncing pleasure and praising.</div>
    </div>
  </div>
</section>

body {
  font-family: 'Poppins', sans-serif;
}

section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 50px;
  min-height: 100vh;
  overflow: hidden;
}

.marquee {
  padding: 1vw;
  white-space: nowrap;
}
  
.marquee:first-child {
  background-color: #ee6c52;
  transform: rotateZ(-2deg);
}

.marquee:last-child {
  background-color: #1f1f1f;
  transform: rotateZ(-1deg);
}

.marquee__inner {
  display: flex;
  gap: 20px;
}

.marquee__content {
  color: #fff;
  font-size: clamp(40px, 4.375vw, 70px);
}

const init = () => {
  const marquee = document.querySelectorAll('.marquee')
  
  if(!marquee) return

  marquee.forEach(item => {
    const marqueeInner = item.querySelector('.marquee__inner')
    const marqueeContent = marqueeInner.querySelector('.marquee__content')
    
    // Duration
    const duration = item.getAttribute('data-marquee-duration')
    
    // Element Clone
    const marqueeContentClone = marqueeContent.cloneNode(true)
    marqueeInner.append(marqueeContentClone)
    
    // Marquee animation
    const marqueeContentAll = marqueeInner.querySelectorAll('.marquee__content')
    marqueeContentAll.forEach(element => {
      gsap.to(element, {
          x: "-101%",
          repeat: -1,
          duration: duration,
          ease: 'linear'
      })
    })
  })
}

document.addEventListener('DOMContentLoaded', init)