gsap.timeline({scrollTrigger}), toggleClass

***scrollTrigger

scrollTrigger 플러그인으로 gsap timeline 내의 스크롤값에 따른 timeline 설정

 

 

gsap.registerPlugin(ScrollTrigger);

const tl = gsap.timeline({
  scrollTrigger:{
    trigger:".box",
    markers:true,
    start:'top 80%',
    end:'top 30%',
    scrub:1 //start-end
  }
});
tl.to(".box",{x:500,duration:5})
  .to(".box",{y:500,duration:1})
  .to(".box",{x:0,duration:2})

https://codepen.io/fangmin/pen/yLMXJXa 

gsap timeline scrollTrigger

 

 

gsap.registerPlugin(ScrollTrigger);

ScrollTrigger.create({
  markers:true,
  start:"top 6%",
  trigger:".panel",
  toggleClass:{targets:'nav',className:'nav-active'},
  onUpdate:(self) =>console.log(self)
})

 

***toggleClass

https://codepen.io/fangmin/pen/KKWqgwq

scrollTrigger callback함수  docs 

https://greensock.com/docs/v3/Plugins/ScrollTrigger