✨ Anime.js 소개: 웹 애니메이션을 위한 올인원 자바스크립트 엔진

Anime.js는 CSS, SVG, DOM 속성을 빠르고 직관적으로 애니메이션할 수 있게 도와주는 강력하고 유연한 자바스크립트 애니메이션 라이브러리입니다. 회전, 경로 이동, SVG 경로 그리기 등 다양한 효과를 단일 API로 구현할 수 있어 웹 애니메이션의 완성형 도구 상자라고 불립니다.

🧰 주요 특징

✅ 직관적인 API

복잡한 애니메이션도 쉽게 구현할 수 있는 간결하고 강력한 API
속성별 파라미터 지정, 유연한 키프레임 시스템, 기본 제공 이징(easing) 함수 등 제공

✅ CSS 트랜스폼 강화

각각의 CSS transform 속성을 개별적으로 조작 가능
함수 기반 값 처리, 다양한 속성 혼합으로 매끄러운 전환 효과 구현

✅ SVG 애니메이션 도구 내장

모양 변화(Shape morphing), 선 그리기(Line drawing), 움직임 경로(Motion path) 설정이 간편

✅ 스크롤 연동 애니메이션

Scroll Observer API로 스크롤에 따라 애니메이션을 실행하거나 동기화 가능
다중 동기화 모드, 고급 임계값 설정, 콜백 제공

✅ 고급 스태거링(Staggering)

요소별 시간차 애니메이션, 값 변화 스태거, 타임라인 위치 스태거 기능 내장
몇 줄의 코드만으로도 화려한 효과 구현 가능

✅ 드래그 & 스프링 효과

드래그, 스냅, 플릭, 던지기와 같은 물리 기반 상호작용 제공
다양한 콜백과 유용한 메서드로 정교한 설정 가능

✅ 타임라인 제어

복잡한 애니메이션 시퀀스를 타임라인으로 구성
재생 설정, 동기화, 콜백 관리가 용이

✅ 반응형 애니메이션

미디어 쿼리 기반으로 반응형 애니메이션 구현
특정 DOM 루트 요소를 기준으로 스코프 지정 가능

✅ 경량 모듈식 구성

필요한 기능만 선택적으로 가져와 번들 크기 최소화 가능

💡 Anime.js를 사용하면 이런 점이 좋습니다

모든 웹 요소에 적용 가능: 텍스트, 이미지, SVG 등 무엇이든 애니메이션으로 제어 가능
하나의 API로 모든 것을: 다양한 형태의 애니메이션을 일관되게 구성
빠르고 가볍다: 성능 최적화가 잘 되어 있어 실사용에 무리 없음

💙 오픈소스 & 후원 기반

Anime.js는 100% 무료로 제공되며, 커뮤니티와 후원자들의 지원을 통해 유지되고 있습니다.

자유롭게 활용해보고, 유용하다고 느꼈다면 프로젝트에 기여해보는 것도 좋겠죠?

🧪 실사용 예시

1️⃣ `Timer`

setTimeout()이나 setInterval()을 대체할 수 있는 시간 기반 함수 콜백을 예약하고 제어하여, 애니메이션과 콜백이 동기화된 상태로 유지되도록 합니다.

import { animate } from 'animejs';

const [ $time, $count ] = utils.$('.value');

createTimer({
  duration: 1000,
  loop: true,
  frameRate: 30,
  onUpdate: self => $time.innerHTML = self.currentTime,
  onLoop: self => $count.innerHTML = self._currentIteration
});

<div class="large centered row">
  <div class="half col">
    <pre class="large log row">
      <span class="label">current time</span>
      <span class="value lcd">0</span>
    </pre>
  </div>
  <div class="half col">
    <pre class="large log row">
      <span class="label">callback fired</span>
      <span class="value lcd">0</span>
    </pre>
  </div>
</div>

2️⃣ `Animation`

대상 요소의 속성 값을 다양한 파라미터, 콜백, 메서드를 활용하여 애니메이션화합니다.

import { animate } from 'animejs';

animate('span', {
  // Property keyframes
  y: [
    { to: '-2.75rem', ease: 'outExpo', duration: 600 },
    { to: 0, ease: 'outBounce', duration: 800, delay: 100 }
  ],
  // Property specific parameters
  rotate: {
    from: '-1turn',
    delay: 0
  },
  delay: (_, i) => i * 50, // Function based value
  ease: 'inOutCirc',
  loopDelay: 1000,
  loop: true
});

<h2 class="large grid centered square-grid text-xl">
  <span>H</span>
  <span>E</span>
  <span>L</span>
  <span>L</span>
  <span>O</span>
  <span>&nbsp;</span>
  <span>W</span>
  <span>O</span>
  <span>R</span>
  <span>L</span>
  <span>D</span>
</h2>

3️⃣ `Timeline`

애니메이션, 타이머, 함수들을 함께 동기화합니다.

import { createTimeline } from 'animejs';

const tl = createTimeline({ defaults: { duration: 750 } });

tl.label('start')
  .add('.square', { x: '15rem' }, 500)
  .add('.circle', { x: '15rem' }, 'start')
  .add('.triangle', { x: '15rem', rotate: '1turn' }, '<-=500');

<div class="large row">
  <div class="medium pyramid">
    <div class="triangle"></div>
    <div class="square"></div>
    <div class="circle"></div>
  </div>
</div>

🖥️ 다른 기술들과 비교

항목	Anime.js	GSAP	Framer Motion	Lottie	Web Animations API
언어/환경	JavaScript	JavaScript	React 기반 (JS/TS)	JSON + JavaScript	브라우저 내장 API
대상	DOM, CSS, SVG, JS 객체	DOM, SVG, Canvas 등 거의 모든 것	React 컴포넌트	After Effects로 제작된 벡터 애니메이션	DOM 요소
API 난이도	직관적이고 간단	다소 복잡하지만 매우 강력	매우 직관적, React 문법에 익숙해야 함	설정은 간단하지만 커스터마이징은 어려움	다소 복잡, 코드가 장황해질 수 있음
타임라인 지원	O (createTimeline())	O (타임라인 매우 강력)	X (대신 React의 상태 관리로 구현)	X	X
스태거 지원	O (stagger())	O	O	X	X
SVG 지원	O (draw, morph 등 전용 API 있음)	O (GSAP MorphSVGPlugin 등)	O	O (미리 렌더된 애니메이션 기반)	제한적
스크롤 연동	O (Scroll Observer)	O (ScrollTrigger)	X (직접 구현 필요)	X	X
크기/성능	작고 가벼움 (~10KB)	상대적으로 큼 (~60KB 이상)	React 종속적, 상대적으로 무거울 수 있음	경량화된 JSON 사용	브라우저 내장, 별도 설치 불필요
학습 곡선	낮음	중간~높음	낮음 (React 유저 기준)	매우 낮음	높음
오픈소스 여부	O (MIT)	O (MIT, 일부 유료 플러그인 존재)	O (MIT)	O (Adobe의 Bodymovin 기반)	O (W3 표준)

언제 Anime.js를 사용하면 좋을까요?

순수 JS/HTML 기반 웹 프로젝트에서 빠르고 직관적인 애니메이션이 필요할 때
SVG 애니메이션, 타임라인 기반 동기화, 스크롤/스태거 등의 고급 기능을 간단한 코드로 구현하고 싶을 때
외부 플러그인이나 React 등의 종속성 없이 가볍고 유연한 애니메이션이 필요할 때

🔗 더 알아보기

👉 공식 웹사이트: https://animejs.com

👉 Docs: https://animejs.com/documentation

👉 깃허브: https://github.com/juliangarnier/anime

TI Tech Lab 이주석연구원

Source

https://animejs.com/

✨ Anime.js 소개: 웹 애니메이션을 위한 올인원 자바스크립트 엔진

🧰 주요 특징

✅ 직관적인 API

✅ CSS 트랜스폼 강화

✅ SVG 애니메이션 도구 내장

✅ 스크롤 연동 애니메이션

✅ 고급 스태거링(Staggering)

✅ 드래그 & 스프링 효과

✅ 타임라인 제어

✅ 반응형 애니메이션

✅ 경량 모듈식 구성

💡 Anime.js를 사용하면 이런 점이 좋습니다

💙 오픈소스 & 후원 기반

🧪 실사용 예시

1️⃣ Timer

2️⃣ Animation

3️⃣ Timeline

🖥️ 다른 기술들과 비교

🔗 더 알아보기

Source

theinnovators

Add comment

You may also like

최근기사

인기기사

소셜채널

카테고리

Facebook

CONTACT US

.

1️⃣ `Timer`

2️⃣ `Animation`

3️⃣ `Timeline`