<div class='green'></div>
<div class='purple'></div>
<div class='orange'></div>
<div class='play-btn'>开始</div>

body{
  background-color:black;
}
div{
  width:60px;
  height:60px;
  border-radius:10px;
  background-color:white;
  margin:10px;
}
.green{
  background-color:green;
}
.purple{
  background-color:purple;
}
.orange{
  background-color:orange;
}
div.play-btn{
  display:flex;
  justify-content:center;
  align-items:center;
  font-family:system-ui;
  height:40px;
  margin-top:40px;
}

var tl = gsap.timeline();
tl.to(".green", {duration: 1, x: 750})
  .to(".purple", {duration: 1, x: 750})
  .to(".orange", {duration: 1, x: 750})
tl.pause()

const btn = document.querySelector('.play-btn')
btn.addEventListener('click',()=>{
  tl.play()
})