← 도구 생태계 디자인 · 개발 프레임워크

anime

웹에서 무언가를 움직이게 할 때 쓰는 자바스크립트 애니메이션 엔진입니다. CSS 속성·SVG·DOM·자바스크립트 객체를 같은 문법 하나로 다루고, AI 코딩 도구에 '이 버튼 애니메이션 넣어줘'라고 할 때 에이전트가 가장 자주 꺼내 드는 라이브러리 중 하나입니다.

juliangarnier MIT · 오픈소스 웹 · JS 라이브러리 ★ 71.9k ⭐ 별 주기

디자인개발 프레임워크

🔍 에디터 리뷰

cmore가 저장소를 직접 열어보고 써본 뒤 남긴 사용기입니다. 광고·협찬이 아닙니다. 검증일: 2026-08-06 기준의 기록이며, 도구는 계속 바뀝니다.

npm으로 깔아 node에서 직접 돌려봤습니다. DOM 없이 자바스크립트 객체만 넘겨도 animate()가 그대로 돌고, 400ms 트위이 392ms에 정확히 끝났습니다. v4 소스를 열어보면 timeline·draggable·svg·text·scroll·waapi까지 기능별 모듈로 쪼개져 있고 서브패스 export가 22개라 필요한 것만 가져가면 됩니다. three.js 어댑터까지 공식으로 들어 있어서 3D 씩까지 한 엔진으로 커버되고, 전체를 다 묶은 min 번들도 gzip 기준 41KB로 가벼운 편입니다. 문서는 예제 코드와 결과 미리보기가 나란히 붙어 있어 처음 배우기에도 좋습니다.솔직히: v3에서 v4로 오며 API가 통째로 바뀌어서 인터넷에 욳도는 예제와 AI가 기억하는 예제 상당수가 그대로 안 돌아갑니다. 에이전트에게 시킬 때는 v4 문법이라고 명시하거나 마이그레이션 가이드를 같이 줘야 헛수고를 줄입니다.

설치하기

아직 개발환경(터미널·Git·Node 등)이 없다면 lazy-starter-kit으로 먼저 준비하고 오세요.

터미널에서

npm install animejs

GitHub 저장소 → 다른 도구 둘러보기

anime은(는) cmore.dev와 무관한 외부 프로젝트입니다. 소개와 리뷰는 "이런 게 있어요" 안내이지 보증이 아니며, 설치·사용에 대한 판단과 책임은 사용자에게 있습니다.

함께 볼 도구

개발 프레임워크

anime

🔍 에디터 리뷰

설치하기

함께 볼 도구

akanjs

beautify-github-readme

hallmark