anime.js를 이용한 text animation 만들기

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>

$('.a').on('mouseenter', function(){
                                 ...
  $('.a .title').each(function(){   //텍스트가 들어있는 class
	  $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='title-lt'>$&</span>"));  //텍스트를 쪼개서 각각 넣을 class
  });

  anime.timeline({loop: 1})  //마우스오버시 한 번만 실행
  .add({
    targets: '.a .title-lt', //쪼갠 텍스트 각각에 적용
    scale: [0.3,1],
    opacity: [0,1],
    translateZ: 0,
    easing: "easeOutExpo",
    duration: 400,
    delay: function(el, i) {
      return 70 * (i+1)  //텍스트 각각의 파도타기 속도
    }
  });
});

 

http://www.bestjquery.com/?SIiFa5Mn