GSAP-Gradient Text ClipPath Scrub

GSAP x SplitText x ScrollTrigger: 스크롤로 살아나는 텍스트 애니메이션

웹에서 텍스트를 단순히 "보여주는 것"을 넘어, 스크롤 동작과 함께 살아 숨쉬는 듯한 인터랙션을 주고 싶을 때가 있죠. 이번에는 GSAP의 대표적인 플러그인들인 ScrollTrigger와 SplitText, 그리고 CSS Clip-path를 조합해 만든 매력적인 텍스트 애니메이션을 소개합니다.

 

See the Pen Gradient Text ClipPath Scrub by GSAP (@GreenSock) on CodePen.

핵심 기술 요약

기술	역할
GSAP	고성능 애니메이션 라이브러리
ScrollTrigger	스크롤에 따라 애니메이션을 트리거
SplitText	텍스트를 개별 글자/단어로 분해하여 제어 가능
Clip-path	각 글자에 마스킹 효과 적용

구현된 기능 개요

• 텍스트가 SplitText로 쪼개짐
• 각 글자마다 clip-path가 적용되어 처음에는 보이지 않음
• 스크롤 시 clip-path가 변경되면서 각 글자가 위에서 아래로 슬라이드되며 등장
• scrub: true 옵션을 통해 스크롤과 애니메이션이 정밀하게 연동

주요 코드 설명

1. HTML 구조

<section class="panel">
  <div class="line">The quick brown fox jumps over the lazy dog</div>
</section>
  

2. CSS 핵심

.line .char {
  display: inline-block;
  clip-path: inset(100% 0% 0% 0%);
  background: linear-gradient(to right, #0fffc1, #7e0fff);
  -webkit-background-clip: text;
  color: transparent;
}
  

3. JavaScript (GSAP + ScrollTrigger + SplitText)

gsap.registerPlugin(ScrollTrigger, SplitText);

let split = new SplitText(".line", { type: "chars" });

gsap.fromTo(split.chars, 
  { clipPath: "inset(100% 0% 0% 0%)" },
  { 
    clipPath: "inset(0% 0% 0% 0%)",
    stagger: 0.02,
    ease: "power2.out",
    scrollTrigger: {
      trigger: ".line",
      start: "top 80%",
      end: "top 20%",
      scrub: true
    }
  }
);
  

결과

이 방식은 퍼포먼스를 해치지 않으면서도 화려한 시각 효과를 구현할 수 있다는 점에서 매우 매력적입니다. 특히 한 줄 텍스트에 집중감을 주거나, 페이지의 첫 인트로 텍스트에 적용하면 훌륭한 효과를 낼 수 있습니다.

확장 응용 아이디어

• type: "words"로 단어 단위 애니메이션 적용
• clip-path 대신 transform: translateY()로 슬라이드 업 효과
• 텍스트 외 이미지에도 clip-path 활용 가능