topic★★★★★난이도

Anime.js — 웹 애니메이션

CSS 속성, SVG, DOM 요소를 부드럽게 트위닝하는 경량 애니메이션 엔진.

#Anime.js#애니메이션#트위닝#SVG

왜 배우는가

웹의 After Effects. 스크롤 효과, 로딩 애니메이션, SVG 모핑 등 인터랙티브 웹에 생명을 불어넣는 핵심 도구다.

Anime.js는 웹의 After Effects다. CSS 속성(opacity, transform), SVG 경로, DOM 속성, 심지어 JavaScript 객체의 숫자 값까지 부드럽게 변화시킨다. 타임라인 기능으로 여러 애니메이션을 순차·병렬로 조합할 수 있다.

용도	설명
입장 애니메이션	요소가 페이드인/슬라이드인
로딩 인디케이터	회전, 반짝임 효과
SVG 모핑	아이콘이 다른 모양으로 변환
스크롤 효과	스크롤에 따라 요소 등장·이동

javascript

// npm install animejs
import anime from "animejs";

anime({
  targets: ".box",
  translateX: 250,      // X축 250px 이동
  rotate: "1turn",      // 360도 회전
  scale: [0.5, 1],      // 0.5배 → 1배 확대
  duration: 800,
  easing: "easeOutElastic(1, .5)",
});

`targets`에 CSS 선택자를 넣고, 변화시킬 속성을 나열하면 된다. `easing` 함수로 동작 느낌(탄성, 바운스 등)을 조절한다.

Claude Code 팁: "Anime.js로 카드가 팬 모양으로 펼쳐지는 애니메이션 만들어줘"라고 하면 stagger(순차 지연), 타임라인까지 포함된 코드를 즉시 생성한다.