--- title: "Anime.js v4の変更点と使い方｜v3からの移行手順とGSAPとの違い" url: "https://www.issoh.co.jp/tech/details/12740/" published: 2026-06-26 updated: 2026-09-27 categories: ["JavaScript"] publisher: "株式会社一創" --- # Anime.js v4の変更点と使い方｜v3からの移行手順とGSAPとの違い Anime.js v4は、2025年4月公開のv4.0.0で全面的に書き直されたJavaScriptアニメーションライブラリです。グローバルな`anime()`関数が廃止され、`animate()`やcreateTimelineを名前付きインポートで読み込むモジュール構成へ変わりました。この記事では、v4の新しい記法と主要機能、npmとCDNでの導入手順、v3からの移行で必要になる書き換え、そしてMITライセンスによる無料化やGSAPとの使い分けまで、公式仕様に沿って整理します。基本的な使い方からv3との違いまで、移行を判断する材料がそろいます。 ## まとめ｜Anime.js v4で押さえる変更点・無料化・選定の結論 Anime.js v4の要点は3つです。1つ目は、APIがESモジュール化され、`anime({targets})`という書き方が`animate(targets, parameters)`に置き換わったこと。2つ目は、ライセンスがMITで、商用利用を含め無料で使えること。3つ目は、`value`が`to`、`easing`が`ease`になるなどパラメータ名が大きく変わり、v3のコードはそのままでは動かないことです。 導入は`npm install animejs`と必要な関数のインポートだけで済み、CDNからESモジュールとして読み込む方法も用意されています。ライブラリ選定では、ScrollTriggerなど豊富なプラグインと長い実績を求めるならGSAP、軽さとモジュール単位の取り込みを重視するならAnime.js v4が向きます。2025年にGSAPも全機能が無料化したため、選ぶ基準は価格から機能とバンドルサイズへ移りました。 ## Anime.js v4の概要｜モジュール型に刷新されたアニメーションエンジン ### v4の位置づけと開発状況｜2025年4月のフルリライトと4.5系への更新 Anime.jsはJulian Garnier氏が開発するアニメーションライブラリで、v4.0.0は2025年4月3日に公開されました。v4はv3への機能追加ではなく、描画性能を軸にゼロから設計し直されたメジャーバージョンです。更新は続いており、2026年6月時点の最新は4.5.0（2026年6月22日公開）、旧系統のv3は3.2.2（2023年11月）で止まっています。新規開発でv3を選ぶ理由は少なく、これから学ぶ場合はv4が出発点になります。 ### アニメーションできる対象｜CSS・SVG・DOM属性・JSオブジェクトの範囲 `animate()`が動かせるのはCSSプロパティだけではありません。CSSセレクタやDOM要素に加え、任意のJavaScriptオブジェクトのプロパティ、SVG属性、HTML属性、CSSカスタムプロパティまで補間できます。`{ x: 0, y: 0 }`のようなプレーンなオブジェクトを渡せば、その数値が滑らかに変化するので、CanvasやThree.jsの座標計算にもそのまま使えます。CSSのtransitionやkeyframesでは届かない値を動かせる点が、ライブラリを使う理由になります。 ### v4が解決した課題｜アニメーションの競合とバンドル肥大への対処方針 v4のリライトには2つの狙いがあります。1つは、同じ要素の同じプロパティに複数のアニメーションが重なったときの挙動の整理です。v3では重なったアニメーションが共存して予期しない結果を生むことがありましたが、v4は新しいアニメーションが走ると古いものを止める方式を既定にしました。もう1つは、全機能をESモジュール化し、使う関数だけを取り込めるようにしたことです。これにより、ライブラリ全体を読み込まなくても済み、バンドルサイズを抑えられます。 ## v4の新しい記法と主要機能｜animate・createTimeline・stagger・SVG ### animate()の基本構文｜対象指定と第二引数パラメータの書き方 基本は`animejs`から`animate`を読み込み、第一引数に対象、第二引数にパラメータを渡します。たとえば`animate('.box', { x: 250, rotate: '1turn', duration: 800, ease: 'outExpo' })`と書くと、`.box`が回転しながら250px移動します。`translate`系は`x`・`y`・`z`のショートハンドで指定でき、ミリ秒単位の`duration`や緩急を決める`ease`も同じオブジェクトにまとめます。v3の`targets`プロパティは姿を消し、対象は専用の第一引数で渡す形に統一されました。 ### createTimelineで複数アニメーションを並べる時系列制御の書き方 複数の動きを順番に、あるいは重ねて再生したいときは`createTimeline`を使います。`const tl = createTimeline()`で生成し、`tl.add(対象, パラメータ, 位置)`を連結して並べます。位置には`'+=250'`のような相対指定やラベルを使え、子要素の共通設定は`defaults`オブジェクトにまとめます。v3の`anime.timeline()`はなくなり、タイムラインも名前付きインポートで読み込む形になりました。 ### staggerで作る連続遅延と要素ごとのずらしアニメーション 複数要素を少しずつ遅らせて動かす「ずらし」は`stagger`で表現します。`animate('.items', { y: 100, delay: stagger(100) })`と書けば、要素ごとに100ミリ秒ずつ遅れて開始します。v4では`stagger('1rem')`のように単位付きの値も扱え、向きを反転する`reversed`やグリッド状の起点指定も渡せます。手作業で`:nth-child`ごとに遅延を書いていたv3のコードを、1行に置き換えられます。 ### svgモジュールで扱う線画・モーフィング・モーションパスの機能 SVG関連の機能はすべて`svg`モジュールに集約されました。線を描き進める表現は`createDrawable`、図形を別の図形へ変形させるモーフィングは`morphTo`、パスに沿って要素を動かす制御は`createMotionPath`で扱います。たとえば`animate(createDrawable('.path'), { draw: '0 1' })`と書くと、パスが描かれていくアニメーションになります。ロゴの描画や地図上の軌跡など、SVGならではの演出を関数の組み合わせで作れます。 ## npm・CDNでの導入手順とMITライセンスによる無料・商用利用の可否 ### npm・pnpmでのインストールと必要モジュールだけのインポート ビルド環境では`npm install animejs`（pnpmなら`pnpm add animejs`）でインストールします。読み込みは`import { animate } from 'animejs'`のように、使う関数だけを名前付きで指定します。タイムラインやユーティリティが必要なら`import { animate, createTimeline, utils } from 'animejs'`と並べて書きます。v3のような`import anime from 'animejs'`のデフォルトインポートは使わず、グローバルな`anime`オブジェクトも生成されません。 ### CDN利用｜ESモジュール版とUMDグローバル版の読み込み方法 ビルドツールを使わない場合はCDNから読み込めます。ESモジュール版は`import { animate } from 'https://esm.sh/animejs'`のように記述し、`