Anime.js v4 — JavaScript アニメーションエンジン

目的

Anime.js は、CSS プロパティ・SVG・DOM 属性・JavaScript オブジェクトを対象にする、軽量で多用途の JavaScript アニメーションライブラリ。v4 では ESM を前提にモジュール分割され、animate・timeline・draggable・スクロール連動・レイアウトなどをサブパス import で取り込める。

4.4.1 package.json 版

MIT ライセンス

ESM sideEffects: false

WAAPI ブラウザ API 連携

CSS transforms SVG draw / morph split text spring easing scroll events auto layout

公式ドキュメント: 利用 API の詳細は animejs.com/documentation を参照。v3 からの移行は Migrating from v3 to v4。

リポジトリ構成（要約）

パス	役割
`src/`	ライブラリ本体（animation, timeline, engine, easings, svg, text, waapi など）
`dist/modules/`	ビルド済み ESM / CJS と型定義（npm 公開物）
`dist/bundles/`	UMD / ESM バンドル（jsDelivr・unpkg 向け）
`examples/`	デモ HTML（stagger, draggable, auto-layout, onscroll 等）
`tests/`	ブラウザ・Node テストスイート

レイヤー

アプリは animate() や createTimeline() などの公開 API を呼び、内部では engine がフレームループを回し、core がターゲット解決・値補間・レンダリングを担当する。

flowchart TD
  App[ページ / DOM / SVG]
  API["公開 API
animate · timeline · draggable"]
  Eng[engine + timer]
  Core["core
targets · values · render"]
  Out[スタイル / 属性 / WAAPI]

  App --> API
  API --> Eng
  Eng --> Core
  Core --> Out
  Out --> App

ターゲット解決 → イージング・キーフレーム → 加算合成 → フレーム描画

エントリ（src/index.js）

ルート animejs からタイマー・アニメーション・タイムライン・ドラッグ・スクロール・エンジン・イージング・レイアウト・SVG・テキスト・WAAPI などを再 export。名前空間付きは easings / utils / svg / text。

animation / timeline

単発トゥイーンとシーケンス。stagger・キーフレーム・ループ・alternate を統合 API で指定。

draggable / scroll

ポインタ操作とスクロール連動。examples に carousel・sticky・responsive scope など。

layout

DOM レイアウトの自動アニメーション（accordion, periodic-table, todo-list 等のデモあり）。

svg / text / waapi

パス描画・モーフ、テキスト split / scramble、Web Animations API ブリッジ。

サブパス export（package.json）

import パス	用途
`animejs`	メインバンドル（推奨エントリ）
`animejs/timer`	タイマー単体
`animejs/timeline`	タイムライン
`animejs/draggable`	ドラッグ可能要素
`animejs/easings/spring`	スプリングイージング
`animejs/layout`	レイアウトアニメーション
`animejs/svg`	SVG ユーティリティ
`animejs/text`	テキスト分割・スクランブル
`animejs/waapi`	WAAPI 連携

ツリーシェイキング: sideEffects: false のため、未使用サブモジュールはバンドラが除去しやすい。必要なサブパスのみ import する運用が可能。

インストール

npm install animejs

CDN では package.json の jsdelivr / unpkg フィールドが指す dist/bundles/anime.umd.min.js を利用できる。

最小例（README より）

import { animate, stagger } from 'animejs';

animate('.square', {
  x: 320,
  rotate: { from: -180 },
  duration: 1250,
  delay: stagger(65, { from: 'center' }),
  ease: 'inOutQuint',
  loop: true,
  alternate: true
});

セレクタ文字列・DOM ノード・オブジェクトリテラルなど、ターゲット表現は v4 API で統一される。イージング名・関数ベース値・キーフレームオブジェクトも同じオプションオブジェクトに載せる。

npm scripts

開発時は npm i のあと npm run <script>。Rollup で dist/ を生成し、tsc -p tsconfig.types.json で型を出力する。

script	内容
`dev`	`src/*/.js` を監視し ESM を `dist/modules` へ、型を生成
`dev:test`	`dev` とブラウザテストを並行
`build`	`dist` を再生成（ESM / UMD / CJS / IIFE + 型）
`test:browser`	ローカルサーバでブラウザテスト（`tests/index.html`）
`test:node`	Node 向けテスト（`tests/suites/node.test.js`）
`open:examples`	`examples/` をディレクトリ一覧で閲覧

公式

License: MIT · Author: Julian Garnier