글자 쪼개기와 도미노 효과 (SplitText & Stagger)

제목이나 문장 전체가 통째로 나타나는 것보다, 글자 하나하나가 순차적으로 나타나면 훨씬 더 생동감 넘치는 디자인을 만들 수 있습니다. SplitType 같은 라이브러리를 사용해 텍스트를 글자(chars) 단위로 쪼개고, GSAP의 stagger(시차) 속성을 결합하면 타이핑 효과나 파도타기 효과를 단 몇 줄의 코드로 완벽하게 구현할 수 있습니다.

1. SplitType 초기화: new SplitType('.title', { types: 'chars' })를 통해 각 글자를 <span> 태그로 감쌉니다.
2. CSS 준비: 부모 컨테이너에 clip-path나 overflow: hidden을 주어 글자가 바닥에서 올라오는 효과를 극대화합니다.
3. stagger 적용: gsap.from(myText.chars, { stagger: 0.05, y: 100 })을 통해 각 글자가 0.05초 간격으로 시차를 두고 애니메이션을 시작하게 만듭니다.