<section class="lightgreen">
  
</section>

<section class="lightblue">
  <div class="box"></div>
</section>

<section class="pink">
  
</section>

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

* {
  margin: 0;
  padding: 0;
}

section {
  height: 100vh;
 display: flex;
  align-items: center;
}

.lightgreen {
  background: lightgreen;
}
.lightblue {
  background: lightblue;
}
.pink {
  background: pink;
}
.red {
  background: #2e2e2e;
}

const timeline = gsap.timeline()

timeline
  .to('.box', {
    duration: 3,
    xPercent: 300
  })
  .to('.box', {
    duration: 3,
    yPercent: 300
  })
  .to('.box', {
    duration: 3,
    xPercent: 0
  })
  .to('.box', {
    duration: 3,
    yPercent: 0
  })
  

ScrollTrigger.create({
  id: '標記1',
  animation: timeline,
  trigger: 'section:nth-child(2)',
  scrub: true,
  markers: true,
  start: 'top center',
  end: 'bottom 100',
  onEnter: () => {
    console.log('[進入] 動畫_開始播放')
  },
  onLeave: () => {
    console.log('[離開] 動畫_終止播放')
  },
  onEnterBack: () => {
    console.log('[回頭進入] 動畫_反向播放')
  },
  onLeaveBack: () => {
    console.log('[回頭離開] 動畫_終止播放')
  },
  onUpdate: () => {
    console.log('滾動中..')
  },
  onToggle: () => {
    console.log('------ onToggle ------') 
  },
  toggleClass: 'red'
})