GSAP 가로스크롤 텍스트 애니메이션: 한 글자씩 사라지는 안개 효과 구현하기
CSS 25.09.01 조회 30GSAP 가로스크롤 텍스트 애니메이션: 한 글자씩 사라지는 안개 효과 구현하기
웹사이트에서 스크롤 애니메이션은 사용자에게 몰입감을 주는 중요한 요소입니다.
특히 텍스트가 한 글자씩 안개처럼 사라지는 효과는 부드럽고 감각적인 인상을 줍니다.
이번 글에서는 GSAP ScrollTrigger를 활용해, 가로 스크롤에 따라 텍스트 한 글자씩 사라지는 모션을 구현하는 방법을 소개합니다.
이런 텍스트 애니메이션은 특히 브랜드 캠페인이나 프로모션 페이지에서 사용하면 시각적 임팩트를 극대화할 수 있습니다.
➰➰➰
✨ 오늘 구현할 애니메이션 기능 요약 ✨
✔ 텍스트를 span 태그로 감싸 글자 단위로 분리(split)
✔ GSAP을 활용한 텍스트 애니메이션을 각 글자에 적용
✔ 가로 스크롤 진행에 따라 글자의 opacity, transform, filter 속성이 함께 변하도록 설정
✏️ HTML 구조는 이렇게 생겼어요
✔ 가로스크롤 구조를 위한 sticky 영역 추가 (GSAP ScrollTrigger의 pin 속성과 동일)
1 2 3 4 5 6 7 8 9 | <section id="inc01"> <div class="group-collection"> <div class="sticky-wrapper"> <div class="sticky-container"> <div class="cont"><h2 class="text-l">Collection</h2></div> </div> </div> </div> </section> | cs |
✏️ CSS로 효과 구현하기
✔ 한 글자씩 분리된 글자(span)을 독립된 애니메이션 단위로 만들기 위해 inline-block을 설정
1 2 3 4 5 6 7 8 9 10 | #inc01{position:relative;background-color:#000} #inc01 .inner{min-width:var(--main-width);margin:0 auto;padding:0 80px} #inc01 .sticky-container{position:sticky;top:0;left:0;height:100vh;overflow:hidden} /* Collection 텍스트 모션 */ #inc01 .group-collection .sticky-wrapper{height:600vh} #inc01 .group-collection .sticky-container{display:flex;align-items:center} #inc01 .group-collection .cont{display:flex;align-items:center;gap:140px} #inc01 .group-collection .cont .text-l{display:flex;padding-left:130px;padding-right:130px;font-size:130px;color:#fff;font-family:var(--e-font-gothic)} #inc01 .group-collection .cont .text-l .char{display:inline-block} | cs |
✏️ 모션은 이렇게 작성해요
1. 글자 분리(split type) + 텍스트 안개 효과
✔ 문자열을 한 글자씩 잘라 로 감싸 DOM에 삽입해, 글자 단위 애니메이션이 가능하도록 만드는 방식
✔ transform, opacity, filter 속성을 활용하여 순차적 안개 효과 적용
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | // text split motion const target = document.querySelector('#inc01 .group-collection h2.text-l'); const characters = target.textContent.split(''); const wrappedText = characters .map(char => `<span class="char">${char}</span>`) .join(''); target.innerHTML = wrappedText; const inc01Text = gsap.timeline({ scrollTrigger:{ trigger:"#inc01", start:"top top", end:"50% top", scrub:1, invalidateOnRefresh: true, } }); inc01Text.to("#inc01 .group-collection h2.text-l .char",{filter:"blur(0.8em)",yPercent:-150,stagger:0.5,ease:"power2.in"},"<"); | cs |
2. 가로 스크롤
✔ 콘텐츠 전체 길이만큼 왼쪽으로 이동시키고(xPercent:-100), 마지막 요소가 화면 안에 잘 보이도록 브라우저 너비만큼 추가(x: window.innerWidth) 조정하는 방식
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | //가로 스크롤 const inc01Collection = gsap.timeline({ scrollTrigger:{ trigger:"#inc01 .group-collection", start:"top top", end:"bottom bottom", scrub:1, invalidateOnRefresh:true } }); inc01Collection.to("#inc01 .group-collection .cont",{ xPercent:-100, x:() => { return window.innerWidth; } }) | cs |
See the Pen GSAP 가로스크롤 텍스트 애니메이션: 한 글자씩 사라지는 안개 효과 구현하기 by designkits (@designkits) on CodePen.
➰➰➰
