gsap.utils.toArray , scrollTrigger 활용하여 각element에 스크롤값 부여

 

FUNCTIONS를 반환,GSAP의 기능 기반 기능을 활용하여 트윈에 직접 연결할 수 있습니다. 

이 경우 모든 대상에 대해 동일한 종료 값을 사용하는 대신 각 대상에 대해 한 번씩 호출됩니다.

const reveal = gsap.utils.toArray('.reveal');
  reveal.forEach((text,i)=>{
    ScrollTrigger.create({
     trigger:text,
     toggleClass:'active',
     start:"top 90%",
     end:"top 20%",
     markers:true,
     scrub:true
  });
});

const images = gsap.utils.toArray('img');
  images.forEach((img,i)=>{
    ScrollTrigger.create({
     trigger:img,
     toggleClass:'active',
     start:"top 90%",
     end:"top 20%",
     markers:true,
     scrub:true
  });
});

 

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

gsap forEach 사용하여 scrollTrigger

*참고: toArray 메서드

https://greensock.com/docs/v3/GSAP/UtilityMethods/toArray()