[Scolltrigger] fade-in 효과 적용 시 이슈(잠깐 나타났다 fade-in 동작)

GSAP Scolltrigger를 이용해 opacity가 0이었다가 1로 변경되는 효과를 주려고 했다.

추가로 y 값도 변경하여 위에서 올라오며 나타나도록 효과를 주었다.

 

 

 

그런데, 위와 같이 페이지가 로딩되며 text가 잠시 표시되었다가 fade-in으로 나타나는 문제가 생겼다.

gsap 코드는 아래와 같이 from 메서드를 이용했다.

gsap.from(".section1 .row h2", {
    scrollTrigger: {
        trigger: ".section1 .row h2",
    },
    duration: 0.6, opacity: 0, y: 80,
});
gsap.from(".section1 .row .new_font22", {
    delay: 0.4,
    scrollTrigger: {
        trigger: ".section1 .row .new_font22",
    },
    duration: 0.6, opacity: 0, y: 80,
});
gsap.from(".section1 .row .new_font18", {
    delay: 0.6,
    scrollTrigger: {
        trigger: ".section1 .row .new_font18",
    },
    duration: 0.6, opacity: 0, y: 80,
});

여러 시도를 해봤지만 페이지 안의 요소가 많아지면 이런 현상이 발생하는 듯 하다..

 

element에 style="opacity: 0;"을 주고 1로 변하도록, from이 아닌 to, fromTo 메서드를 이용하여 해결하였다.

이때 trigger와 delay는 to 영역에 써야 적용된다. 수정한 코드는 아래와 같다.

gsap.fromTo(".section1 .row h2", {
    duration: 0.6, opacity: 0, y: 80},
    {scrollTrigger: {
        trigger: ".section1 .row h2",
    },
    opacity: 1, y: 0
});
gsap.fromTo(".section1 .row .new_font22", {
    duration: 0.6, opacity: 0, y: 80},
    {delay: 0.4, scrollTrigger: {
        trigger: ".section1 .row .new_font22",
    },
    opacity: 1, y: 0
});
gsap.fromTo(".section1 .row .new_font18", {
    duration: 0.6, opacity: 0, y: 80},
    {delay: 0.6,
	scrollTrigger: {
        trigger: ".section1 .row .new_font18",
    },
    opacity: 1, y: 0
});