CodePen Embed - GSAP-scrollTrigger start and end 客制觸發位置

<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" />
</section>

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

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

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

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

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

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

gsap.to(logo2, {
  duration: 10,
  rotation: 720,
  xPercent: 1000,
  scrollTrigger: {
    markers: true,
    trigger: 'section:nth-child(2)',
    toggleActions: 'play pause reverse reset',
    start: 'top center',
    end: '20 10%'
  }
})

This Pen is owned by Naiky on CodePen.

See more by @naiky on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External CSS

External JavaScript