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'のように記述し、<script type="module">の中で使います。従来どおりグローバル変数で扱いたいときはUMD版があり、anime.umd.min.jsを<script>で読み込むとanimeオブジェクトが生え、そこからconst { animate } = animeで関数を取り出します。手早く試すならCDN、本番のフロントエンドではnpm導入が扱いやすい形です。

バンドルサイズの目安｜全体約40KB gzippedとtree-shakingの効果

v4のフルバンドル（全機能を含むESM版）はgzip後でおよそ40KBです。ただしv4はESモジュール化されているため、animateだけを使う構成なら未使用の機能はバンドルから外れ、実際に含まれる容量は十数KB程度まで小さくなります。この仕組みはViteのようなESモジュール前提のバンドラーと相性がよく、tree-shakingがそのまま効きます。React環境での具体的なビルド設定はViteを使ったReactプロジェクトのセットアップ方法も参考になります。バンドルサイズを抑えたい小〜中規模のサイトで扱いやすい軽さです。

ライセンスと費用｜MITで商用利用も無料・Sponsors時代との違い

Anime.js v4のライセンスはMITで、商用プロジェクトでも無料で使えます。npmのパッケージ情報でもライセンスはMITと明記されています。v4は開発初期にGitHub Sponsors限定で先行公開されていた時期があり、「有料ではないか」という誤解が今も残っていますが、正式版は誰でも無料で導入できます。著作権表示を残すというMITの条件を満たせば、ライセンス費用や利用報告は要りません。

v3からv4への移行｜破壊的変更とパラメータ名の対応関係

v3で書いたコードはv4でそのまま動きません。書き換えが必要な代表的な箇所を、影響の大きい順に整理します。

関数呼び出しの変更｜anime()からanimate()への書き換え手順

最初に直すのは関数の呼び出し方です。v3のanime({ targets: 'div', translateX: 100 })は、v4ではanimate('div', { translateX: 100 })になります。対象をtargetsプロパティで渡していたのをやめ、第一引数に分離するのが基本の変換です。あわせてimport anime from 'animejs'をimport { animate } from 'animejs'へ書き換えます。プロジェクト内のanime(を機械的に探し、対象の切り出しとインポートを直すのが移行の出発点になります。

パラメータ名の対応表｜value→to・easing→ease・direction系の変更

関数名以外にも、パラメータの名称が数多く変わりました。主な対応は次のとおりです。

とくに easing から ease への変更は、関数名の接頭辞 ease を外す点を見落としやすい箇所です。既定のイージングも out(2) に変わっているため、指定を省いていた動きは見た目が変わります。

コールバックとタイムラインの変更｜on接頭辞とcreateTimeline化

イベントに応じて関数を呼ぶコールバックは、すべてon接頭辞付きに統一されました。beginはonBegin、updateはonUpdate、completeはonCompleteになり、値が変わるたびに呼ばれるchangeはonRenderへ名前を変えています。ループの開始・終了だったloopBeginとloopCompleteはonLoopの1つにまとまりました。タイムラインの生成もanime.timeline()からcreateTimeline()へ変わり、子要素の共通設定はdefaultsオブジェクトの中に書きます。

既定挙動の変更で起きる不具合｜composition上書きとreverse仕様変更

名前の置き換えだけでは直らない、挙動そのものの変更にも注意します。v4ではcompositionの既定値が'replace'になり、同じ対象の同じプロパティに新しいアニメーションを当てると、走っていた古いアニメーションが止まります。v3のように重ねたい場合はcomposition: 'none'を、値を足し合わせたい場合は'add'を明示します。またreverse()は常に逆再生する動作に変わったため、v3で「現在の向きを反転」させていた用途はalternate()へ置き換えます。動かないように見える不具合の多くは、この既定値の違いが原因です。

GSAPとの比較と使い分け｜両者が無料化した2026年の選定基準

Anime.js v4を採用するかどうかは、定番のGSAPと比べて決めることが多いはずです。費用・機能・規模の3点で違いを見ます。

ライセンスと費用の比較｜両者とも無料化した現状と選定への影響

かつてGSAPはScrollTriggerなど一部のプラグインが有料で、Club GreenSockの年間費用がかかりました。状況が変わったのは2024年10月のWebflowによるGreenSock買収後で、2025年4月30日にコアと全プラグインが商用利用を含めて無料になりました。Anime.js v4もMITで無料のため、2026年時点では「どちらも無料」が前提になります。価格で差がつかなくなった分、機能とバンドルサイズで選ぶ流れに変わりました。

機能とエコシステムの差｜ScrollTrigger等プラグインとモジュール構成

両者の性格の違いを整理すると次のようになります。

スクロール演出を作り込みたい現場では、ScrollTriggerを中心とした周辺プラグインの厚みがGSAPの強みになります。必要な機能だけを小さく取り込みたい場合は、モジュール単位で読み込めるAnime.js v4が扱いやすい構成です。

バンドルサイズと学習コストから考える使い分けの判断基準

判断の軸は、求める演出の複雑さとバンドルサイズの許容量です。ScrollTriggerで複雑なスクロール演出を緻密に組むなら、機能のそろったGSAPのほうが結果的に近道になります。逆に、ボタンやカードの小さな動き、ローディング表現といったUIの補助が目的なら、Anime.js v4の軽さと素直なAPIが合います。学習コストはどちらも極端には高くなく、片方を覚えればもう片方の考え方も応用が効きます。まず軽さを優先し、機能が足りなくなったらGSAPを検討する順序が現実的です。

Anime.js v4を選ぶべき場面と、あえて採用を避ける場面の判断

Anime.js v4が向くのは、UIのマイクロインタラクションやSVGの軽い演出を、バンドルを膨らませずに加えたい場面です。ReactやVueのコンポーネントに局所的な動きを足す用途とも噛み合います。反対に、採用を避けたほうがよい場面もはっきりしています。スクロール位置に厳密に同期した長尺の演出や、複数セクションをまたぐ複雑なスクロールテリングを作るなら、ScrollTriggerを持つGSAPを最初から選ぶほうが手戻りが少なく済みます。すでにGSAPで動いている既存実装へ、軽さだけを理由にAnime.js v4を混在させるのも、保守の面では避けるべきです。1つのプロジェクトでアニメーションライブラリは1つに絞るのが無難です。

React・Vueでの実装｜createScopeを使ったコンポーネント連携

コンポーネント指向のフレームワークでは、アニメーションの生成と破棄をライフサイクルに合わせる必要があります。v4はそのためのcreateScopeを用意しています。

ReactでのcreateScope｜useEffectとスコープ破棄の実装

ReactではuseEffectの中でcreateScopeを呼び、ルート要素を基準にアニメーションを限定します。const scope = createScope({ root: ref.current })のように生成し、その中でanimate()を実行すると、対象が指定要素の配下に絞られます。useEffectのクリーンアップでscope.revert()を返せば、コンポーネントの再描画や破棄のタイミングでアニメーションが正しく後始末されます。ReactやVueそのものの基礎はReactとVue3の基本概念も合わせて確認すると、連携の前提が整理できます。

Vueでの組み込み｜onMountedとスコープ管理の実装パターン

VueではコンポーネントがDOMに描画された後のonMountedでアニメーションを開始します。refで取得したルート要素をcreateScopeに渡し、その中でanimate()やタイムラインを定義する流れはReactと共通です。コンポーネントが破棄されるonUnmounted（またはスコープのrevert）で後始末すれば、画面遷移を繰り返してもアニメーションが二重に走りません。テンプレート構文との相性もよく、クラスを付けた要素をそのまま対象にできます。

フレームワーク連携で陥りやすい再生成の不具合と対処の手順

よくある不具合は、状態更新のたびにコンポーネントが再描画され、アニメーションが作り直されて再生されなくなるケースです。原因は、再描画のたびにcreateTimeline()やanimate()が呼ばれ、新しいインスタンスができてしまう点にあります。対処は、生成処理をuseEffectやonMountedの中に置き、依存配列を空にして初回だけ実行することです。再生の制御だけを外側のイベントハンドラから呼ぶように分けると、状態が変わっても動きが途切れません。スコープの破棄を忘れるとメモリ上にアニメーションが残るため、後始末まで含めて1セットで実装します。

Anime.js v4のよくある質問

導入前に迷いやすい点を、実際の検索でよく見られる質問から整理します。

Anime.js v4は無料で商用利用できますか？

無料で商用利用できます。Anime.js v4のライセンスはMITで、npmのパッケージ情報でもMITと明記されています。著作権表示を残すというMITの条件を満たせば、個人・法人を問わず、商用プロダクトでもライセンス費用は発生しません。開発初期にGitHub Sponsors限定で先行配布されていた時期があったため有料という誤解が残っていますが、正式版は誰でも無料で導入できます。

Anime.js v4とv3の主な違いは何ですか？

最も大きい違いは、グローバルなanime()が廃止され、animate()などを名前付きインポートで読み込むESモジュール構成になった点です。あわせてvalueがto、easingがeaseになるなどパラメータ名が多数変わり、コールバックはonBeginのようにon接頭辞付きへ統一されました。重なったアニメーションの既定挙動も変わったため、v3のコードはそのままでは動かず、書き換えが必要です。

Anime.js v4はCDNからでも利用できますか？

利用できます。ESモジュール版はimport { animate } from 'https://esm.sh/animejs'のように書き、<script type="module">の中で使います。グローバル変数で扱いたい場合はUMD版があり、anime.umd.min.jsを読み込むとanimeオブジェクトから各関数を取り出せます。ビルド環境がない簡単な検証ならCDN、本番のフロントエンド開発ではnpm導入が扱いやすい使い分けになります。

Anime.js v4とGSAPはどちらを使うべきですか？

求める演出で決めます。ScrollTriggerを使った複雑なスクロール演出や、長尺で緻密なタイムラインを組むならGSAPが向きます。UIのマイクロインタラクションやSVGの軽い動きを、バンドルを増やさず加えたいならAnime.js v4が扱いやすい選択です。2025年にGSAPも無料化したため価格差はなく、機能の厚みを取るか、モジュール単位の軽さを取るかが判断の分かれ目になります。

Anime.js v4はReactやVueに対応していますか？

対応しています。v4にはcreateScopeが用意されており、ReactならuseEffect、VueならonMountedの中でスコープを生成してアニメーションを定義します。クリーンアップでscope.revert()を呼べば、再描画や画面遷移のたびにアニメーションが二重化する不具合を防げます。フレームワーク本体に依存しない設計のため、SvelteなどほかのライブラリやプレーンなJavaScriptでも同じように使えます。

関連記事

• Headless UIとは？React/Vue向けライブラリの設計思想と基本概念を徹底解説：必要な機能だけを取り込む軽量ライブラリ選びの考え方が、Anime.js v4のモジュール構成とも重なります。
• Material 3 Expressiveとは？その定義と位置づけを解説：UIにモーションを取り入れる設計思想を知る手がかりになります。