<img 
  class="logo"
  width="80"        src="https://cdn.worldvectorlogo.com/logos/gsap-greensock.svg" />
const logo = document.querySelector('.logo')

gsap.to(logo,
{
  duration: 4,
  repeat: -1,
  keyframes: [
    { xPercent: 50, yPercent: 0 },
    { 
      xPercent: 50,
      yPercent: 50,
      onStart: () => {
        console.log('動畫開始前執行')
      }
    },
    { 
      xPercent: 0,
      yPercent: 50,
      onComplete: (e)  => {
      console.log('動畫完成後執行')
    }},
    { xPercent: 0, yPercent: 0 },
  ]
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.co/gsap@3/dist/gsap.min.js