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

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

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

<section />

* {
  margin: 0;
  padding: 0;
}

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

.lightgreen {
  background: lightgreen;
}
.lightblue {
  background: lightblue;
}
.pink {
  background: pink;
}

.ghost {
  filter: grayscale(80%);
}

const section1 = document.querySelector('section:nth-child(1)')

const section2 = document.querySelector('section:nth-child(2)')

const section3 = document.querySelector('section:nth-child(3)')
console.log(section3)

const section4 = document.querySelector('section:nth-child(4)')

const logo1 = document.querySelectorAll('.logo')[0]

const logo2 = document.querySelectorAll('.logo')[1]

const logo3 = document.querySelectorAll('.logo')[2]

// 基本設置
gsap.to(logo2, {
  xPercent: 1000,
  yPercent: 0,
  duration: 3,
  scrollTrigger: {
    markers: true,
    trigger: section2,
    endTrigger: section4,
    // end: 'bottom 10',
    scrub: true,
    pin: '.ghost',
  }
})

// ------ keyframes + scrollTrigger ------
// gsap.to(logo2, {
//   scrollTrigger: {
//     trigger: section2,
//     scrub: true
//   },
//   keyframes: [
//     { duration: 2, x: 100 },
//     { duration: 2, y: 100 },
//     { duration: 2, x: 0 },
//     { duration: 2, y: 0 },
//   ],
// })
// ------ keyframes + scrollTrigger ------

// ------ timeline + scrollTrigger ------
// const timeline = gsap.timeline({
//   scrollTrigger: {
//     markers: true,
//     trigger: section2,
//     scrub: true,
//   }
// })

// timeline
//   .to(logo2, {
//     duration: 3,
//     xPercent: 400,
//   })
//   .to(logo2, {
//     duration: 3,
//     yPercent: 400,
//   })
//   .to(logo2, {
//     duration: 3,
//     xPercent: 0,
//   })
//   .to(logo2, {
//     duration: 3,
//     yPercent: 0,
//   })
// ------ timeline + scrollTrigger ------