[GSAP] 마우스 오버시 텍스트 애니메이션

마우스 오버시, 텍스트 한 글자씩 올라가면서 사라지고 동일한 텍스트 한글쟈씩 올라오는 텍스트 애니메이션

1.

먼저 텍스트를 복제하고 부모에 자식으로 붙여준다.
이때, 주의할 점은 원래의 클래스명은 지워주는 것이다.
(* 지우지 않을 경우 각각의 텍스트를 선택할 때 문제가 된다.)

2.

라이브러리를 사용해서 각각의 텍스트를 split 시켜준다.

   <script src="https://unpkg.com/split-type"></script>

이때, 다른 함수 내에서도 splitType 변수를 사용할 수 있도록 data() 메서드를 사용해서 저장한다.

jQuery의 data() 메서드 : 요소에 연결된 데이터를 관리하는 데 사용된다.
이 메서드를 사용하면 HTML 요소에 임의의 데이터를 저장하고, 필요할 때 해당 데이터를 검색할 수 있다.

3.

마우스 오버시, 텍스트가 한글자씩 나오도록 gsap fromTo 메서드를 사용하여 애니메이션을 만든다.

물론, split을 이 함수 내에서 할 수도 있지만 그렇게 되면 마우스 오버시 버벅거림이 생긴다. 따라서 함수 밖에서 한번만 처리해주는 것이 깔끔하다.

결과