gsap-04(feat. scrollTrigger)

이질감 표현하기

지정한 부분이 이질감이있게 표현이된다.

 // 01. 이질감 표현하기
      gsap.to(".parallax__item__desc",{
        yPercent:-300,
        ease:"none",
        duration:0.5,
        scrollTrigger:{
          trigger:".parallax__item__desc",
          start:"top bottom",
          end:"top bottom",
          markers:true,
          scrub:true
        }
      });

지정한부분을 forEach 문을 이용하여 다중선택하여 사용할 수도있다.

 // 02. 여러개 이질감 표현하기
      gsap.utils.toArray(".parallax__item__desc").forEach(item => {
        gsap.to(item,{
          yPercent:-200,
          ease:"none",
          duration:0.5,
          scrollTrigger:{
            trigger:item,
            start:"top bottom",
            end:"bottom top",
            markers:true,
            scrub:0.5
          }
        });
      });