텍스트 쪼개기 및 특수 시각 효과 애니메이션 기초

🔠 글자 하나하나에 생명력을 불어넣기

제목이나 문장의 글자 단위(Char), 단어 단위(Word)로 애니메이션을 주기 위해 텍스트를 DOM 엘리먼트로 쪼개는 기법이 자주 사용됩니다. (GSAP의 SplitText 플러그인 또는 SplitType 같은 무료 라이브러리 활용)

쪼개진 글자 배열을 대상으로 GSAP의 stagger 속성을 적용하면, 마치 타이핑을 치거나 글자들이 날아와서 조립되는 듯한 인상적인 텍스트 모션을 손쉽게 구현할 수 있습니다.

<!-- 텍스트 분할을 위한 SplitType 라이브러리 사용 예시 -->
<script src="https://unpkg.com/split-type"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>

<h1 class="title" style="font-size: 3rem; clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);">
  Welcome to GSAP World
</h1>

<script>
// 텍스트를 단어와 글자 단위로 <span>으로 분할
const myText = new SplitType('.title', { types: 'chars' })

// 분할된 글자(chars)들을 대상으로 애니메이션
gsap.from(myText.chars, {
  y: 100,
  opacity: 0,
  rotation: 15,
  stagger: 0.05,
  duration: 0.8,
  ease: "back.out(1.5)"
});
</script>

실행 결과