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

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

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

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

.logo {
  display: block;
}

const fristLogo = document.querySelectorAll('.logo')[0]
const secondLogo = document.querySelectorAll('.logo')[1]
const thirdLogo = document.querySelectorAll('.logo')[2]

const forLogo = document.querySelectorAll('.logo')[3]

const timeLine = gsap.timeline({ repeat: -1 })
timeLine
  .to(fristLogo, { duration: 2, x: 100 })
  .to(fristLogo, { duration: 2, y: 100 })
  .to(fristLogo, { duration: 2, x: 0 })
  .to(fristLogo, { duration: 2, y: 0 })

// 物件方法
gsap.to(secondLogo, {
  repeat: -1,
  rotate: 360,
  keyframes: [
    { duration: 2, x: 100 },
    { duration: 2, y: 100, onComplete: () => {
      console.log('y 到 100 了')
    } },
    { duration: 2, x: 0 },
    { duration: 2, y: 0 },
  ]
})

// 百分比方法
gsap.to(thirdLogo, {
  duration: 8,
  rotate: 360,
  repeat: -1,
  keyframes: {
    '25%': { x: 100, y:0 },
    '50%': { y: 100, x: 100 },
    '75%': { x: 0, y: 100 },
    '100%': { y: 0, x: 0 },
  }
})

// 陣列方法
gsap.to(forLogo, {
  keyframes: {
    x: [ 0, 100, 100, 0, 0 ],
    y: [ 0, 0,  100, 100, 0 ]
  },
  repeat: -1,
  duration: 4,
  easeEach: 'power1.out', // 每個移動線性
  // ease: 'power1', // 總移動線性設置
})