animejs

javascript animation라이브러리를 살펴보면서 animejs를 보고있었는데 눈길을 사로잡는 animation이 있었다. 바로 svg를 사용한 Line Drawing Animation 이였다!

불멍 물멍에 이은 anime멍…

animejs에서 볼 수 있는 line drawing animation 예시

보면 볼 수록 빠져드는 animation에 바로 따라 만들어 보기로 했다!! 마침 팔만코딩경을 버튼으로 홍보할 좋은 기회가 되어서 80000Coding이라는 텍스트를 활용하기로 하였다!

<aside> 🎉 미리보는 결과물!!

https://0igvl2.csb.app/

</aside>

1) Line Drawing Animation

사용법은 너어어어무 간단했다. anime 함수에 필요한 속성을 적절히 전달하면 된다. 나머지 옵션들은 괜찮았지만, target과 strokeDashoffset은 어떤 의미를 하는지 알기 어려웠다.

anime({
  targets: '.line-drawing-demo .lines path',
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: 'easeInOutSine',
  duration: 1500,
  delay: function(el, i) { return i * 250 },
  direction: 'alternate',
  loop: true
});