Ch.2 JavaScript 라이브러리 15선

Anime.js — 웹 애니메이션

article

핵심 내용

CSS, SVG, DOM 요소를 부드럽게 움직이는 경량 애니메이션 라이브러리, Anime.js를 만나보세요.

한 줄 요약: 웹 페이지의 모든 요소를 코드 한 줄로 움직이게 만드는 도구. 실생활 비유: 파워포인트에서 '나타나기, 이동, 회전' 애니메이션을 걸잖아요? Anime.js는 그걸 웹 페이지에서 하는 겁니다. 타이밍, 속도, 경로까지 코드로 정밀하게 제어할 수 있어요.

파일 크기가 17KB밖에 안 됩니다. 그런데 타임라인, 스태거, 이징 함수까지 전부 지원해요.

랜딩 페이지를 열었을 때 로고가 통통 튀고, 텍스트가 한 글자씩 나타나면 어떨까요?

CSS만 쓸 때: keyframes 작성하고, delay 일일이 계산하고, 요소마다 class 붙이고… 복잡한 시퀀스는 코드가 수십 줄로 늘어납니다.

Anime.js 코드: targets만 지정하면 stagger로 순차 애니메이션이 자동. timeline으로 여러 동작을 체인처럼 연결합니다.

CDN 한 줄이면 설치 끝. HTML 파일 하나로 바로 애니메이션을 만들 수 있습니다.

<script src="https://cdn.jsdelivr.net/npm/animejs"></script>
anime({
  targets: '.box',
  translateX: 250,
  rotate: '1turn',
  duration: 800,
  easing: 'easeInOutQuad'
});

class가 'box'인 요소가 오른쪽으로 250px 이동하면서 한 바퀴 회전합니다. duration은 밀리초 단위이고, easing으로 가감속 곡선을 지정합니다. 'easeInOutQuad'는 처음엔 천천히, 중간에 빠르게, 끝에 다시 천천히 움직여요.

AI에게 애니메이션을 만들어달라고 할 때, 동작 순서와 타이밍을 구체적으로 말하면 결과가 달라집니다.

좋은 프롬프트 예시 "Anime.js로 랜딩 페이지 인트로 애니메이션을 만들어줘. 로고가 위에서 떨어지며 바운스 → 텍스트가 한 글자씩 페이드인 → 버튼이 아래에서 슬라이드업. 전체 시퀀스가 2초 안에 끝나게 해줘."

프롬프트 변형 "위 애니메이션에 stagger를 추가해서, 네비게이션 메뉴 항목들이 왼쪽에서 0.1초 간격으로 슬라이드되게 해줘. 스크롤하면 섹션별로 fadeIn 효과도 넣어줘."

// 타임라인으로 순차 애니메이션
const tl = anime.timeline({ easing: 'easeOutExpo' });

tl.add({
  targets: '.logo',
  translateY: [-100, 0],
  opacity: [0, 1],
  duration: 600,
  easing: 'easeOutBounce'
})
.add({
  targets: '.title .letter',
  opacity: [0, 1],
  translateY: [20, 0],
  delay: anime.stagger(50),
  duration: 400
}, '-=200')
.add({
  targets: '.cta-button',
  translateY: [30, 0],
  opacity: [0, 1],
  duration: 500
}, '-=100');

랜딩 페이지 인트로 애니메이션을 만들어봅시다. 로고, 타이틀, 버튼이 순서대로 등장합니다.

<!DOCTYPE html>
<html><head>
<title>랜딩 페이지</title>
<style>
  body { display: flex; flex-direction: column;
         align-items: center; justify-content: center;
         height: 100vh; font-family: sans-serif;
         background: #f5f0eb; overflow: hidden; }
  .logo { font-size: 48px; opacity: 0; }
  .title { font-size: 24px; color: #333; opacity: 0;
           margin: 16px 0; }
  .cta { padding: 12px 32px; background: #5B5EA6;
         color: white; border: none; border-radius: 8px;
         font-size: 18px; cursor: pointer; opacity: 0; }
</style>
</head>
<body>
  <div class="logo">🚀</div>
  <h1 class="title">나만의 서비스를 시작하세요</h1>
  <button class="cta">무료로 시작하기</button>

  <script src="https://cdn.jsdelivr.net/npm/animejs"></script>
  <script>
    const tl = anime.timeline({
      easing: 'easeOutExpo'
    });

    tl.add({
      targets: '.logo',
      translateY: [-80, 0],
      opacity: [0, 1],
      duration: 800,
      easing: 'easeOutBounce'
    })
    .add({
      targets: '.title',
      opacity: [0, 1],
      translateY: [20, 0],
      duration: 600
    }, '-=300')
    .add({
      targets: '.cta',
      opacity: [0, 1],
      scale: [0.8, 1],
      duration: 500
    }, '-=200');
  </script>
</body></html>

이 파일을 landing.html로 저장하고 브라우저에서 열어보세요. 로고가 위에서 떨어지며 바운스하고, 타이틀이 살짝 올라오며 나타나고, 버튼이 확대되며 등장합니다. 전체 시퀀스가 1.5초 안에 자연스럽게 완료됩니다.

Anime.js에서 애니메이션 대상을 지정하는 속성은?

key

핵심 용어

랜딩 페이지

로고 바운스, 텍스트 타이핑 효과, 버튼 페이드인 시퀀스

로딩 화면

스피너 회전, 프로그레스 바 채우기, 스켈레톤 펄스 효과

인터랙티브 UI

카드 뒤집기, 메뉴 슬라이드, 모달 줌인/아웃 전환

데이터 시각화

차트 막대가 아래서 올라오고, 숫자가 카운트업되는 효과

check_circle

핵심 정리

  • 1Anime.js는 CDN 한 줄로 설치하고, targets에 CSS 선택자를 넣으면 바로 애니메이션이 시작된다
  • 2timeline()으로 여러 애니메이션을 순차 실행하고, stagger()로 간격을 자동 계산한다
  • 3easing 옵션으로 바운스, 탄성, 등속 등 다양한 가감속 곡선을 적용할 수 있다
  • 4프롬프트에 동작 순서, 타이밍, 이징 스타일을 명시하면 AI가 타임라인 코드를 완성해준다

퀴즈와 인터랙션으로 더 깊이 학습하세요

play_circle인터랙티브 레슨 시작