<img 
 id="logo"
 width="90"     src="https://cdn.worldvectorlogo.com/logos/gsap-greensock.svg" />

<br/>

<img 
 id="logo-timeline"
 width="90"     src="https://cdn.worldvectorlogo.com/logos/gsap-greensock.svg" />

const item = document.querySelector('#logo')
const timeLineItem = document.querySelector('#logo-timeline')

// 不使用 timeline
gsap.to(item, { x: 100, duration: 2 })
gsap.to(item, { y: 100, duration: 2, delay: 2 }) // delay == 前一個動畫的秒數
gsap.to(item, { x: 0, duration: 2, delay: 4 }) // delay == 前二個動畫的秒數加總
gsap.to(item, { y: 0, duration: 2, delay: 6 })


// 使用 timeline
const timelineItem = gsap.timeline({ repeat: -1 })

timelineItem
  .to(timeLineItem, { x: 100, duration: 2 })
  .to(timeLineItem, { y: 100, duration: 2 })
  .to(timeLineItem, { x: 0, duration: 2 })
  .to(timeLineItem, { y: 0, duration: 2 })