Anime.jsとは｜v4の使い方・GSAPとの違い・コピペで動くサンプルコード集を完全解説

【PR】本記事はプロモーションを含みます。

「Anime.jsって軽量で良いと聞くけど、結局GSAPとどっちを使うべき？」「v4の新機能は何が変わった？」「コピペで動くサンプルが欲しい」——Webサイトに動きを加えたい人なら一度は気になるJavaScriptアニメーションライブラリです。

Anime.jsは約24.5KBの軽量・MITライセンス・直感的なAPIを兼ね備えた人気のJSアニメーションライブラリです。2025年4月にv4.0が正式リリースされ、ESMファースト設計・スクロール連動などの新機能が標準搭載されました。
本記事では、基本構文からコピペで動くサンプル、GSAPとの違い、向き不向きまで完全解説します。

Ｗｉｎスクール	【初心者向け】 ・20～30代におすすめ ・データ分析・AIに特化 公式サイトで無料登録する

Anime.jsとは｜軽量で直感的なJSアニメーションライブラリ

Anime.js（アニメJS）は、JavaScriptで作るアニメーションライブラリです。DOM要素のCSS値・SVG属性・JavaScriptオブジェクトのプロパティなど、補間できる対象が幅広いのが特徴です。
2025年4月にv4.0が正式リリースされ、ESMファースト設計・スクロール連動機能・新しいAPI設計が追加されました。

項目	内容
名称	Anime.js（v4が最新）
容量	約24.5KB（部分インポートでさらに軽量化可）
ライセンス	MIT（商用利用OK）
対応対象	DOM・CSS・SVG・JSオブジェクト
依存	jQueryなど不要・モダンブラウザ対応
公式サイト	animejs.com

なぜAnime.jsが選ばれるのか

Anime.jsが選ばれる主な理由は次の4点です。

• 軽量：本体24.5KB、必要なモジュールだけインポートすればさらに小さくなる
• 直感的なAPI：「セレクタ＋プロパティ」を渡すだけの宣言的な書き方
• MITライセンス：商用利用OK・ライセンス費用ゼロ
• 豊富な機能：タイムライン、stagger、easing、SVGモーフィング、スクロール連動まで標準対応

「CSSアニメーションだけだと表現が物足りない」「GSAPほどの機能は要らないが、Web Animations APIだけだと書きづらい」という中間ニーズの定番として、長年支持されているライブラリです。

Anime.js v4の主な進化ポイント

• ESMモジュール対応：必要な機能だけインポートしてバンドルサイズを最小化
• 新しいanimate() API：v3より宣言的で、TypeScriptとの相性が向上
• スクロール連動標準搭載：パララックス・進入アニメが他ライブラリ不要で書ける
• タイムラインAPIの改善：複数アニメの順序制御がより簡潔に
• SVGアニメーションの強化：line drawing、morphなどがv3より書きやすく

v3で書かれた既存コードはそのまま動かない箇所があるため、移行する場合はマイグレーションガイドを確認してください。
新規プロジェクトはv4から始めるのがおすすめです。

インストールと基本構文

npm でのインストール

npm install animejs

# 利用例
import { animate } from 'animejs';

animate('.box', {
  translateX: 250,
  duration: 1000,
});

CDN（HTML直接読み込み）

<script src="https://cdn.jsdelivr.net/npm/animejs@4/lib/anime.iife.min.js"></script>
<script>
  anime.animate('.box', { translateX: 250, duration: 1000 });
</script>

核となるのはanimate()関数。第1引数にアニメさせる対象（CSSセレクタ／DOMノード／オブジェクト）、第2引数にプロパティと時間設定を渡すだけです。

コピペで動くサンプルコード5選

サンプル①：フェードイン＋下から上へ

animate('.fade-up', {
  opacity: [0, 1],
  translateY: [40, 0],
  duration: 800,
  ease: 'out-quad',
});

セクション見出しなどに頻出の演出。opacity: [0, 1]のように配列で「from→to」を指定するのがAnime.jsの書き方です。

サンプル②：横スライド＋戻るループ

animate('.slider', {
  translateX: 200,
  duration: 1200,
  ease: 'in-out-sine',
  alternate: true,
  loop: true,
});

alternate: trueで往復、loop: trueで無限ループ。
注意喚起バナーや背景装飾などに使われる演出です。

サンプル③：360度回転して戻る

animate('.rotate', {
  rotate: 360,
  duration: 1000,
  ease: 'in-out-quad',
  loop: true,
});

ローディングスピナーやアイコン演出に。rotateはdeg単位で指定します。

サンプル④：staggerでカード順次出現

import { animate, stagger } from 'animejs';

animate('.card', {
  opacity: [0, 1],
  translateY: [30, 0],
  delay: stagger(100),
  duration: 600,
});

stagger(100)で各要素を100ms ずつズラして実行。グリッドのカード一覧、ナビメニューの順次表示などに重宝します。

サンプル⑤：SVGの線描き（drawing）

import { animate, svg } from 'animejs';

animate(svg.createDrawable('.svg-path'), {
  draw: ['0 0', '0 1'],
  duration: 2000,
  ease: 'in-out-cubic',
});

SVGパスを「線で描いていく」演出。ブランドロゴのアニメーション表示によく使われます。
v4からはsvg.createDrawableでより簡潔に書けるようになりました。

タイムライン・stagger・easingの使い方

タイムラインで複数アニメを連結

import { createTimeline } from 'animejs';

const tl = createTimeline()
  .add('.title', { opacity: [0,1], translateY: [-20,0], duration: 600 })
  .add('.subtitle', { opacity: [0,1], translateY: [-10,0], duration: 500 }, '-=200')
  .add('.cta', { scale: [0.9, 1], opacity: [0,1], duration: 500 }, '-=200');

第3引数の'-=200'は「前のアニメより200ms早く開始」の意味。タイトル→サブタイトル→CTAボタンのような連続演出を直感的に書けます。

主なeasing一覧

名前	用途
linear	等速。ローディングバーなど
in-out-quad / in-out-cubic	万能。スライド・フェード等の標準
out-back / out-bounce	跳ねる演出。要素登場時に「目を引く」
spring	物理的な弾性。よりリアルな動き
steps(n)	段階的なフリップアニメ

スクロール連動アニメーション（v4新機能）

import { animate, onScroll } from 'animejs';

animate('.fade-on-scroll', {
  opacity: [0, 1],
  translateY: [50, 0],
  duration: 800,
  autoplay: onScroll({ enter: 'top 80%' }),
});

onScrollヘルパーを使うと、「画面の上から80%の位置に入ったら発火」といった指定が1行で書けます。
ScrollTriggerなどの追加プラグインなしで、進入アニメ・パララックス・進捗バーなどが実装可能です。

SVGアニメーションの実装

• 線描き（draw）：SVGパスを徐々に描画する演出。ロゴアニメ・図解の段階表示
• モーフィング（morph）：1つのSVGパスを別の形に変形させる演出
• パスに沿った移動（motionPath）：要素をSVGの曲線に沿って動かす
• 属性アニメ：fill・stroke・strokeWidthなどSVG属性を直接変化

「装飾性の高い演出」「ブランドロゴの動的表現」を作りたい場面で、Anime.jsのSVG機能は圧倒的に書きやすい選択肢になります。

GSAPとの違い｜どちらを選ぶべきか

項目	Anime.js v4	GSAP（2025年〜完全無料化）
サイズ	約24.5KB	約30KB（ScrollTrigger等は別計上）
API	シンプル・直感的	豊富・多機能
性能	十分速い	業界最速クラス
学習コスト	低い	中〜高（機能多）
ライセンス	MIT	商用無料（旧Bonusも開放）
得意分野	SVG・小〜中規模演出	大規模演出・複雑なシーケンス
主な拡張	標準でスクロール連動	ScrollTrigger、SplitTextなど豊富

業務的には「LP・小規模Webサイト・SVG装飾はAnime.js」「複雑なブランドサイト・ゲーム的UIはGSAP」が定番の使い分けです。
迷った場合は学習コストの低いAnime.jsから始め、必要に応じてGSAPに移行するのが現実的です。

パフォーマンスのコツとハマりやすい落とし穴

• translateX/translateY/scale/rotate/opacityを中心に使う（GPU処理で軽い）
• left/top/width/heightのアニメは再レイアウトが走るため避ける
• 大量要素のアニメはwill-changeのCSSヒントを併用
• スクロール連動はrequestAnimationFrameベースで自前管理しない（onScrollに任せる）
• 同時アニメ数が多い場合はタイムラインで束ねるとパフォーマンスが安定

「アニメが重い」と感じたら、まずChrome DevToolsの「Performance」タブで再描画コストを計測。動かすCSSプロパティを変えるだけで劇的に軽くなることが多いです。

Anime.jsが向いている案件・向いていない案件

向いている案件

• LPやコーポレートサイトの登場アニメ・スクロール演出
• SVGロゴのライン描画・モーフィング
• 軽量さを優先したい中小規模プロジェクト
• WordPressや既存CMSの一部に動きを足したい
• 個人開発・OSSで「商用無料」を確実に確保したい

向いていない案件

• 大規模ブランドサイトの複雑なシーケンス（GSAPが優位）
• ゲーム的UI／物理演算が必要な動き（要他ライブラリ）
• WebGL・Canvas2Dとの密結合演出（要Three.jsやpixi.js）
• SEO上で重いJSバンドルを避けたい超高速サイト（CSSアニメで十分なケース）

よくある質問

Q. 商用利用は本当に無料ですか？

はい、MITライセンスのため商用利用OK。ライセンス費用も帰属表示の義務もありません。配布物にライセンス文を含める程度の対応で十分です。

Q. v3で書いたコードはv4で動きますか？

API設計が変わったためそのままでは動かない箇所があります。新規はv4で、既存はマイグレーションガイドを見ながら段階的に移行が現実的です。

Q. ReactやVueで使えますか？

使えます。useEffect等のライフサイクルでDOM参照を渡すか、refで直接対象要素を取得してanimate(refRef.current, ...)のように呼び出します。
SSR（Next.js等）ではクライアントサイドのみで実行するよう注意してください。

Q. GSAPと併用できますか？

技術的には可能ですが、同じ要素に両方のアニメを重ねるとプロパティ管理が複雑化するため非推奨です。プロジェクトごとにどちらか一本化するのが定石です。

Q. AIにコードを書かせる時に使えるライブラリですか？

Anime.jsはAPI表面が小さく宣言的なため、Claude / ChatGPTに書かせやすいライブラリです。「カードを下からフェードインで順次表示するAnime.js v4のコードを書いて」のような依頼で実用的なコードが返ってきます。

まとめ｜Anime.jsは「Webに動きを足す最初の一歩」

Anime.jsは軽量・直感的・MITライセンスと三拍子そろった、Webサイトに動きを足す入門ライブラリの定番です。
v4ではESM対応・スクロール連動・SVG機能の改善といった現代的な進化が加わり、2026年でも第一線で使える選択肢になっています。

関連記事として、AIで動画を作るVibe Editing、HTMLで動画を作るHyperFrames、AIで自動コーディングするCodexなどと併せて読むと、2026年の表現系Web制作のトレンドがより明確になります。

まずは本記事のサンプル①「フェードイン＋下から上へ」をコピペして動かしてみてください。1分後にはWebに動きが宿ります。

Ｗｉｎスクール	【初心者向け】 ・20～30代におすすめ ・データ分析・AIに特化 公式サイトで無料登録する