<span>「綠球」播放 2 秒後，「紅球」播放。</span>
<div class="box1 box"></div>
</br>
<div class="box2 box"></div>
<button class="play-button">PLAY</button>

.box {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.box1 {
  background: lightgreen;
  
}
.box2 {
  background: pink;
}

const greenBall = document.querySelector('.box1')
const pinkBall = document.querySelector('.box2')
const playBtn = document.querySelector('.play-button')

const timeline = gsap.timeline({ repeat: 0 })

timeline.to(greenBall, {
  xPercent: 500,
  duration: 4,
  ease: 'none'
})

timeline.to(pinkBall, {
  xPercent: 500,
  duration: 2,
  ease: 'none'
}, '<2')

timeline.pause()


playBtn.addEventListener('click', () => {
  timeline.play()
})