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

const animate = (item) => {
    let x = 0;
    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: delay, duration: 1.25, overwrite: "auto", ease: "expo"}
    );
}

gsap.utils.toArray(".reveal").forEach((item) => {
    hide(item);

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

등장 효과를 주고싶은 요소에 클래스명 ‘reveal, reveal_LTR, reveal_BTT, reveal_TTB’를 넣어주고, 지연 시간을 추가할 때는 data-delay=”1″을 추가.

보이는 공간에 reveal 클래스가 있는 요소의 경우, 보였다가 hide가 되는 모습이 보여셔, 아예 css로 reveal 클래스에 opacity를 0으로 주고 시작하니 현상 해결.