gsap-05나타나기 효과(feat. scrollTrigger)

나타나는 효과를 만들어보자

<section id="section3" class="parallax__item">
            <span class="parallax__item__num">03</span>
            <h2 class="parallax__item__title reveal" data-delay="0.5">section3</h2>
            <figure class="parallax__item__imgWrap reveal reveal_TTB" data-delay="0.7">
                <div class="parallax__item__img"></div>
            </figure>
            <p class="parallax__item__desc reveal reveal_BTT" data-delay="1">매 순간에 최선을 다하고, 끊임없이 변화한다.</p>
        </section>

const hide = (item) => {
            gsap.set(item, {autoAlpha: 0});
        }

        const animate = (item)=>{
        let x = 100;
        let y = 0;
        let delay = item.dataset.delay;

        // 각 클래스별 상황 지정
        if(item.classList.contains("reveal_LTR")){
          x = -100,
          y = 0
        } else if(item.classList.contains("reveal_BTT")){
          x = 0,
          y = 100
        }else if(item.classList.contains("reveal_TTB")){
          x = 0,
          y = -100
        } else {
          x = 100,
          y = 0;
        }
        

        gsap.fromTo(item,
         {autoAlpha:0, x:x, y:y}, 
         {autoAlpha:1, x:0, y:0, delay, duration:1.25, overwrite:'auto'}
        //  overwrite:'auto' 한번만실행되게 (버그처럼보이는것 방지)
        );
      };

      gsap.utils.toArray('.reveal').forEach(item => {
        // .reveal을 원하는 곳에넣으면 그넣은곳만 실행됨
        hide(item);

        ScrollTrigger.create({
          trigger:item,
          // start:"top bottom",
          // end:"bottom top",
          markers:true,
          onEnter:() =>{animate(item)}
        });

      });