[GSAP] 타이핑 효과

GSAP의 TextPlugin으로 타이핑 효과를 만들 수 있다.

 

See the Pen TextPlugin - basic by lpla (@lpla) on CodePen.

 

이 플러그인을 이용하면 간단하게 타이핑 효과를 만들 수 있지만 한글은 'ㅌㅏㅇㅣㅍㅣㅇ' 으로 입력되지 않고 '타이핑' 처럼 자음모음이 합쳐져 입력 되는데 이런 작은 디테일에서 아쉬움이 있다.

 

 

sdfsdfSee the Pen TextPlugin - basic by lpla (@lpla) on CodePen.

 

 

 

다행히 구글에 검색해보면 한글 타이핑을 할 수 있도록 누군가 친절하게 만들어 놓은 스크립트가 있다.

 

See the Pen 타이핑 by lpla (@lpla) on CodePen.

 

하지만 이 스크립트는 스크롤 이벤트 없이 페이지가 로드되면 즉시 실행된다.

따라서 GSAP에 이 스크립트를 적용해보았다.

 

 

See the Pen [GSAP] 한글 타이핑 적용 by lpla (@lpla) on CodePen.

 

이제 스크롤을 하면 한글 타이핑이 실행된다.

그런데 스크롤을 위쪽으로 되돌렸다가 다시 내리게 되면 처음부터 실행하지 않고 중간부터 실행되는 것이 신경 쓰여서 수정해보았다.

 

 

See the Pen [GSAP] 타이핑 완성 by lpla (@lpla) on CodePen.

 

최종 완성본이다.