観点別比較
| 観点 | Anime.js v4 | Motion | 使い分け |
|---|---|---|---|
| 記述量・API思想 | 機能ごとの専用API（stagger grid、timeline、svg等）が豊富で、得意領域では圧倒的に短く書ける | コア関数は少数（animate/scroll/inView等）で覚えることが少ない。足りない部分は自前計算で補う | 複雑な演出はAnime.js、小さく始めるならMotion |
| 物理表現（ばね） | spring()をease指定に渡す。パラメータは共通だが「ばね=イージング」の扱い | type:'spring'がトランジションの一級市民。中断時の速度継承が自然 | インタラクティブな連続操作はMotionが有利 |
| スクロール連動 | onScroll()単体でスクラブとトリガーを統合。閾値記法が強力だが学習コスト有り | scroll()/inView()の役割分担が明快。ScrollTimeline対応でスクラブが滑らか | 凝った制御はAnime.js、実用の手堅さはMotion |
| SVG線画 | svg.createDrawable()やモーフィング等の専用ユーティリティが標準装備 | pathLength/pathOffsetの数値補間として最小限サポート | SVG演出が主目的ならAnime.js |
| タイムライン | createTimeline()が本家。ラベル・入れ子・コールバックまで揃う | 配列によるシーケンス記法。データとして宣言的に書ける | 動的構築はAnime.js、静的シーケンスはMotion |
| バンドルサイズ（配布物実測） | anime.esm.min.js: 約116KB / gzip約40KB（v4.5.0全機能入り、ツリーシェイクでさらに減る） | motion.js: 約136KB / gzip約45KB（v12.42.2全機能入りブラウザバンドル、motion/miniなら大幅減） | 全部入り同士はほぼ互角。最小構成の絞りやすさはMotion |
バンドルサイズはnpm配布物（animejs 4.5.0 / motion 12.42.2）をローカルで実測した参考値です。 実際のアプリでは使用APIに応じたツリーシェイク後のサイズになります。
総合的な使い分け指針
Anime.jsを選ぶとき
- - グリッドstaggerやSVG線画など「演出そのもの」が主役のサイト
- - タイムラインを動的に組み立てる複雑なシーケンスがある
- - フレームワーク非依存で1つの書き方に統一したい
Motionを選ぶとき
- - ばね物理を使ったインタラクション（ドラッグ・連打・中断）が多いUI
- - スクロール連動を手堅く、少ないAPIで実装したい
- - Reactプロジェクトで、将来motion/reactの宣言的API（layoutアニメ等）へ深く統合する可能性がある
補足: 本サイトは公平比較のため、Motionも素のDOMを命令的に駆動するvanilla API （motion/dom系）に限定して使用しています。Reactコンポーネントと深く統合するなら motion/reactのlayoutアニメーションやAnimatePresenceが強力で、この領域はAnime.jsに対する明確な優位点です。