TweenMax 텍스트 애니메이션

TweenMax로 텍스트가 순차적으로 보이는 애니메이션을 만들었습니다.

한글자씩 제어하기 위해 lettering.js 도 같이 사용했습니다.

 

<div id="wrap">
  <p id="cont">
    <span class="txt txt1">Hello,</span>
    <span class="txt txt2">Tweenmax Splittext</span>
    <span class="txt txt3">animation test!</span>
  </p>
</div>

 

#wrap {
  max-width: 300px;
}

#cont {
  font-size: 30px;
  font-weight: bold;
  color: #333;
}

#cont .txt {
  display: block;
  float: left;
}

#cont .txt1 {
   color:#6271fd;
}

#cont .txt2 {
   color:#8b72fa;
}

#cont .txt3 {
   color:#121280;
}

#cont .txt span {
  display: block;
  float: left;
  position: relative;
  min-width: 8px;
  min-height: 8px;
  transform: skew(-10deg);
}

 

$(function() {

  var $txt = $('#cont .txt');
  $txt.lettering();

  ani();

  function ani() {
    TweenMax.staggerFromTo($('#cont span'), 0.5, {
      ease: Back.easeOut.config(1.7),
      opacity: 0,
      bottom: -60
    }, {
      ease: Back.easeOut.config(1.7),
      opacity: 1,
      bottom: 0
    }, 0.05);
  }

})

 

jsfiddle에서 보기

https://jsfiddle.net/hyuckjin/j319b0nu/