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
});
'JavaScript' 카테고리의 다른 글
[JavaScript] checkbox 전체 체크 (동적으로 생성된 checkbox도 적용하기) (0) | 2024.02.06 |
---|---|
[ScrollTrigger] start 옵션에 대하여 (초간단) (0) | 2023.04.26 |
나의 Parallax 적용기.. [GSAP 사용] (0) | 2023.03.30 |
scrollify.js의 pagination (네이비게이션) (0) | 2023.03.30 |
스크롤 부드럽게 하는 JS (0) | 2023.03.28 |