Anime.js 사용법 완벽 정리

Anime.js는 간결하면서도 강력한 API를 제공하는 가벼운 애니메이션 라이브러리로,
CSS 속성, SVG, DOM 요소 등 다양한 대상을 쉽게 애니메이션할 수 있습니다.

이번 포스팅에서는 Anime.js의 핵심 개념과 사용법, React 프로젝트에서의 적용법까지 자세히 다뤄보겠습니다.

 

1. Anime.js란?

• 오픈소스 자바스크립트 애니메이션 라이브러리
• CSS 프로퍼티, SVG 속성, DOM 속성, JS 객체 등 거의 모든 것을 애니메이션 가능
• 작고 빠르며, 복잡한 타임라인 없이도 자연스러운 애니메이션 작성 가능
• 다양한 easing 함수 지원
• keyframes를 통한 복잡한 단계별 애니메이션도 가능

2. 설치 

npm install animejs

 

3. Anime.js 기본 사용법

Anime.js는 anime() 함수를 호출하면서 옵션 객체를 넘겨 애니메이션을 설정합니다.

anime({
  targets: '.box', // CSS 선택자 또는 DOM 요소
  translateX: 250, // X축 이동
  rotate: '1turn', // 360도 회전
  duration: 2000, // 2초
  easing: 'easeInOutSine' // 부드러운 easing 효과
});

 

4. React 프로젝트에서 Anime.js 사용하기

React 환경에서는 DOM 요소에 직접 접근해야 하므로, 보통 useRef와 useEffect 훅을 사용합니다.

 

import React, { useEffect, useRef } from "react";
import anime from "animejs";

const AnimeBox = () => {
  const boxRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    if (boxRef.current) {
      anime({
        targets: boxRef.current,
        translateX: 250,
        rotate: '1turn',
        duration: 2000,
        easing: 'easeInOutSine'
      });
    }
  }, []);

  return (
    <div
      ref={boxRef}
      style={{
        width: 100,
        height: 100,
        backgroundColor: "#ff6347",
        margin: "50px auto"
      }}
    />
  );
};

export default AnimeBox;

 

 

• useRef로 DOM 요소를 참조하고
• useEffect 내에서 anime()를 호출해 애니메이션을 실행합니다.
• 컴포넌트가 마운트될 때 애니메이션이 한 번 재생됩니다.

5. 키프레임 애니메이션으로 복잡한 연출하기

Anime.js의 강력한 기능 중 하나는 keyframes 옵션입니다.
여러 단계를 순차적으로 처리하는 애니메이션을 쉽게 작성할 수 있습니다.

anime({
  targets: '.box',
  keyframes: [
    { translateX: 250 },
    { translateY: 100 },
    { rotate: '1turn' },
    { scale: 1.5 },
    { rotate: '0turn', scale: 1 }
  ],
  duration: 4000,
  easing: 'easeInOutSine'
});

 

 

6. 이벤트와 콜백 활용하기

anime({
  targets: '.box',
  translateX: 250,
  duration: 2000,
  easing: 'easeInOutQuad',
  begin: () => console.log("애니메이션 시작!"),
  update: (anim) => console.log(`진행중: ${anim.progress.toFixed(2)}%`),
  complete: () => console.log("애니메이션 완료!")
});

 

7. 반복 애니메이션 만들기

anime({
  targets: '.box',
  translateX: 250,
  direction: 'alternate', // 앞뒤로 반복
  loop: true,
  easing: 'easeInOutSine',
  duration: 1500
});