Anime.js 타임라인 문제 해결 방법

게시 2023/08/17

By kobung 2 분읽는 시간

문제 상황: `Error: Timeline is not a function`

Anime.js를 사용하여 애니메이션 타임라인을 만들려고 하다가 발생한 오류입니다. 오류 메시지는 Error: Timeline is not a function으로 나타납니다.

원인 파악

이 문제의 주된 원인은 보통 라이브러리가 올바르게 로드되지 않았거나, Anime.js의 최신 버전이 아닐 때 발생합니다.

라이브러리 로드 문제: HTML 문서에서 Anime.js 라이브러리를 올바르게 불러오지 못했을 경우
버전 문제: 현재 사용 중인 Anime.js의 버전이 낮아서 타임라인 함수를 지원하지 않을 경우

해결 방법

라이브러리 로드 확인

첫 번째로 HTML 파일의 <head> 부분에 Anime.js 라이브러리가 올바르게 로드되어 있는지 확인해야 합니다. 로드에 문제가 있다면, 다음과 같이 수정하세요.

  
<script src="path/to/anime.min.js"></script>

버전 업데이트

두 번째로, 라이브러리의 최신 버전을 사용하고 있는지 확인합니다. 만약 오래된 버전을 사용하고 있다면, 최신 버전으로 업데이트하세요. npm을 사용하는 경우 다음과 같이 명령을 실행합니다.

npm install animejs@latest

예제 코드 수정

마지막으로, Anime.js의 타임라인 기능을 올바르게 사용했는지 코드를 확인합니다. 예를 들어, 다음과 같이 코드를 작성할 수 있습니다.

  
const timeline = anime.timeline({
  loop: true
});

timeline
  .add({
    targets: '.box',
    translateX: 250,
    duration: 800
  })
  .add({
    targets: '.box',
    translateY: 250,
    duration: 800
  });

이렇게 하면 Error: Timeline is not a function 오류를 해결할 수 있습니다.

JavaScript

Anime