통통튀는 텍스트 애니메이션 구현하기

포트폴리오를 작업하면서 글자가 와르르맨션처럼 움직이는걸 하고 싶어서 찾아보니 !!!
gsap 라이브러리를 사용해 다양한 애니메이션 구현을 할 수 있어서 나도 tweenMax를 사용해
애니메이션을 만들어보았다!

일단 마크업은 글씨를 감싸고 있는 부모 h1 요소만 만들어놓고 나머지 글자는 js에서 처리하였다.

  // 메인 타이틀 클래스 가져오기
  main_animation_text(".main_title");

  function main_animation_text(element) {
    var newText = "";
    var theText = document.querySelector(element);

    for (i = 0; i < theText.innerText.length; i++) {
      newText += "<span>";
      newText += theText.innerText[i];
      newText += "</span>";
    }
    theText.innerHTML = newText;
    var targetsDiv = document.querySelectorAll(element + " span");
    TweenMax.staggerFromTo(
      targetsDiv,
      2,
      {
        opacity: 0,
        y: 300,
        ease: Elastic.easeOut.config(1.2, 0.9),
      },
      {
        opacity: 1,
        y: 0,
        ease: Elastic.easeOut.config(1.2, 0.9),
      },
      0.15
    );
  }

메인 애니메이션 텍스트 함수를 만든 후 글자 하나의 element를 가져오기 위해 넣어주고
for문을 사용해 innerText로 element안의 text 값을 가져와 span 태그로 구성된 글자들을
순서대로 출력하게끔 해 빈 문자열인 newText 안에 element 텍스트 값이 들어가 출력되는것이다.

TweenMax 애니메이션 속성

TweenMax.staggerFromTo(
      targetsDiv,
      2,
  	  // 중괄호 안 파라미터는 애니메이션 할 속성
  	  // * 주의: 속성이름은 카멜케이스로 작성해야할 것
      {
        opacity: 0,
        y: 300,
        // gsap에는 애니메이션을 추가할 수 있는 
        // 다른 ease 속성들을 패키지로 제공하고 있음
        ease: Elastic.easeOut.config(1.2, 0.9),
      },
      {
        opacity: 1,
        y: 0,
        ease: Elastic.easeOut.config(1.2, 0.9),
      },
      0.15
    );

targetsDiv : 애니메이션 대상
targetsDiv 하단 2 : 애니메이션 시간
y: 글자 포지션 값
ease: gsap에서는 애니메이션을 추가할 수 있는 다른 ease 속성들을 패키지로 제공하고 있음
0.15 : 애니메이션 딜레이

결과

이것외에도 TweenMax의 다양한 애니메이션 속성들이 많은데 다음엔 다른 텍스트 애니메이션이나
슬라이드 애니메이션을 참고해 만들어봐야겠당 🤗

GreenSock - GSAP 사이트