1. 2026 年 Web アニメーションの地図 — コード / エディタ / 3D / インタラクティブの 4 分類

2026 年の Web アニメーションはひとつのツールで完結しません。マーケティングページのスクロールインタラクション、プロダクト UI のマイクロインタラクション、ゲームやメタバースのような 3D シーン、学習コンテンツのステートマシン主導のインタラクティブキャラクター — それぞれに別の 1 軍ツールが存在します。

大きく分けると 4 カテゴリです。

- コードファーストのライブラリ — GSAP 3.13、Motion、Anime.js 4、Web Animations API、react-spring、Lenis、AutoAnimate、Mo.js、Tween.js、Popmotion

- エディタ/ランタイム系 — Rive (Editor + Runtime)、Lottie / dotLottie (LottieFiles + Airbnb ランタイム)、Spline (3D)、Theatre.js (コード統合タイムライン)

- 3D エンジン — Three.js、React Three Fiber (R3F)、Babylon.js、PlayCanvas、生の WebGPU

- ネイティブ標準 — CSS animations、CSS scroll-driven animations、Web Animations API、View Transitions API

2026 年を決定づけた出来事は 2 つあります。第 1 に 2024 年 11 月、Webflow が GreenSock を買収し、GSAP と全有料プラグイン (SplitText、MorphSVG、ScrollSmoother、MotionPath、DrawSVG、Inertia など) が MIT ライセンスのオープンソースに変わりました。第 2 に 2024 年 10 月、Framer チームが Framer Motion を「Motion」へリブランドし、React 以外に Vue・Vanilla JS も同列に扱うようになりました。

この 2 つの変化で、無料の選択肢が一気に 2 段階上に押し上げられました。5 年前は「有料の GSAP vs 無料の Anime.js」でしたが、いまは GSAP も Motion も両方無料です。

本記事は 2026 年 5 月時点でこれらのツールすべてを高速で一巡するガイドです。入門者は「どこから始めるか」を、シニアは「次のプロジェクトに何を追加するか」を判断する助けになるはずです。

2. GSAP の MIT 無料化 (2024-11、Webflow 買収) — 何が変わったのか

GreenSock Animation Platform (GSAP) は 2008 年以来、Web アニメーションの事実上の標準でした。単純なトゥイーンエンジンを超えて、タイムライン / スクロールトリガー / SVG モーフィング / テキスト分割 / 慣性 / モーションパスといった難しいケースに対する実証済みの解を提供してきました。

2024 年 11 月、Webflow が GreenSock を買収して大きな変化が起こりました。過去に有料だった "Club GreenSock" の全プラグイン (年 99 ドルの SplitText や MorphSVG など) が MIT ライセンスで無料になり、npm からインストールするだけで使えるようになりました。

npm install gsap

Webflow 買収後はライセンスキー不要で全プラグインが利用可能

GSAP 3.13 の主な機能をまとめます。

- gsap.to / gsap.from / gsap.fromTo / gsap.set — 基本のトゥイーン 4 種

- gsap.timeline() — 時間軸でシーケンスを正確に制御

- ScrollTrigger — スクロール起因のインタラクションの 1 位。pin / scrub / snap / markers でデバッグ

- ScrollSmoother — Lenis 相当のスムーススクロール (旧有料、現在無料)

- SplitText — 文字 / 単語 / 行単位での分割 (旧有料、現在無料)

- MorphSVG — SVG path 間のモーフィング (旧有料、現在無料)

- DrawSVG — ラインを描画するエフェクト (旧有料、現在無料)

- MotionPath — path 上を移動 (旧有料、現在無料)

- Inertia / Draggable — ドラッグ + 慣性 (旧有料、現在無料)

- Flip — FLIP (First, Last, Invert, Play) によるレイアウト遷移

React と組み合わせた基本例:

gsap.registerPlugin(ScrollTrigger, SplitText)

export function HeroHeadline({ text }: { text: string }) {

const ref = useRef<HTMLHeadingElement>(null)

useEffect(() => {

if (!ref.current) return

const split = new SplitText(ref.current, { type: 'chars,words' })

const tl = gsap.timeline({

scrollTrigger: {

trigger: ref.current,

start: 'top 80%',

end: 'bottom 20%',

toggleActions: 'play none none reverse',

},

})

tl.from(split.chars, {

opacity: 0,

y: 40,

rotateX: -45,

stagger: 0.02,

duration: 0.6,

ease: 'power3.out',

})

return () => {

tl.kill()

split.revert()

}

}, [text])

return <h1 ref={ref}>{text}</h1>

}

GSAP の最大の強みは 30 年近く積み上げてきた安定性と互換性です。IE 時代から検証されたトゥイーンエンジンなので、ほぼあらゆるブラウザ / デバイスで一貫した結果が得られます。短所は React/Vue のコンポーネントモデルとの統合に useEffect の cleanup を自分で管理する必要があることですが、公式の `@gsap/react` フック (`useGSAP`) が用意されています。

GSAP を使うのが良い場面:

- スクロール主導のマーケティングサイト (Awwwards 系) — ScrollTrigger は事実上の標準

- SVG が多いモーショングラフィック — MorphSVG、DrawSVG、MotionPath

- 複雑なシーケンス / カードシャッフル / テキストエフェクト

- 厳しいタイミング制御が必要なゲーム / インタラクティブ広告

3. Motion (旧 Framer Motion、2024-10 リブランド) — React / Vue / Vanilla

2024 年 10 月、Framer チームが Framer Motion を「Motion」へリブランドしました。ポイントは 2 つです。

- React 以外に Vue・Vanilla JS も 1 級市民に

- Motion のコア (Motion One) は約 3.8KB の超軽量ライブラリで、Web Animations API を直接活用

既存の `framer-motion` パッケージ名も使えますが、新規プロジェクトは `motion` で始めるのが標準になりました。

npm install motion

React: import { motion } from "motion/react"

Vue: import { motion } from "motion-v"

Vanilla: import { animate, scroll, inView } from "motion"

React コンポーネントとしての例:

export function Card() {

const [open, setOpen] = useState(false)

return (

<>

{open && (

initial={{ opacity: 0, y: 20 }}

animate={{ opacity: 1, y: 0 }}

exit={{ opacity: 0, y: -20 }}

transition={{ type: 'spring', stiffness: 300, damping: 30 }}

>

カード内容

)}

</>

)

}

Vanilla JS ならさらに軽量:

// 基本のトゥイーン

animate('.card', { opacity: 1, y: 0 }, { duration: 0.5, easing: 'spring' })

// スクロールトリガー

scroll(

animate('.parallax', { y: [-200, 200] }),

{ target: document.querySelector('.section') }

)

Motion の強み:

- バンドルサイズが軽い (`motion/mini` は 2.6KB)

- React の宣言的モデルとよく馴染む

- `layoutId` による自動 FLIP 遷移 — 他のライブラリにない強力な機能

- spring physics が 1 級 — duration 型と spring 型を自由に混ぜられる

Motion を使うのが良い場面:

- React/Vue 製のプロダクト UI — カード遷移、モーダル、ページ遷移

- デザインシステムのマイクロインタラクション

- 軽量なマーケティングページ (GSAP の重いスクロールワークまで不要なケース)

GSAP vs Motion の選択はシンプルです。マーケティングサイトのスクロールインタラクションが主役なら GSAP、プロダクト UI のカード遷移が主役なら Motion。両方を併用するプロジェクトも多いです。

4. Rive — インタラクティブ + ステートマシン

Rive は 2026 年最も興味深いアニメーションツールです。単なるトゥイーン出力ではなく、「ステートマシン」を基盤としたインタラクティブなアニメーションを構築できます。Lottie が「動画のように再生するだけのアニメーション」なら、Rive は「ユーザー入力に反応するコンポーネントのようなアニメーション」です。

Rive のコア構成要素:

- Rive Editor — デスクトップ + Web エディタ (デザイナー向け)

- Rive Runtime — Web (WASM)、iOS、Android、Flutter、React Native、Unity

- ステートマシン — 入力 (input) に応じた遷移グラフ

- Listeners — マウスホバー / クリック / ドラッグを直接処理

代表例はトグルスイッチ、視線追従するキャラクター、パスワード入力時に目を覆う動物、インタラクティブなオンボーディングイラストなど。一度作れば全プラットフォームで同じように動くのが大きな利点です。

Web での使用例:

export function PasswordCharacter({ password }: { password: string }) {

const { rive, RiveComponent } = useRive({

src: '/animations/login-character.riv',

stateMachines: 'Login State Machine',

autoplay: true,

})

const isChecking = useStateMachineInput(rive, 'Login State Machine', 'isChecking')

const numLook = useStateMachineInput(rive, 'Login State Machine', 'numLook')

useEffect(() => {

if (numLook) numLook.value = password.length * 6

}, [password, numLook])

return (

onMouseEnter={() => {

if (isChecking) isChecking.value = true

}}

onMouseLeave={() => {

if (isChecking) isChecking.value = false

}}

/>

)

}

Rive の強み:

- デザイナー自身がインタラクションロジックまで作れる (開発者への引き継ぎ不要)

- .riv ファイルは非常に小さく効率的 (ベクター + ボーン)

- マルチプラットフォーム (Web / モバイル / ゲームエンジン)

- 無料プランも十分強力

短所は学習コストがあること (Photoshop/Figma とは別のパラダイム)、純粋なモーショングラフィック用途では Lottie より割高に見える場合があることです。ただ慣れてしまえば「Lottie では作れない」インタラクションを構築できます。

5. Lottie + dotLottie — Airbnb の標準

Lottie は 2017 年に Airbnb がオープンソース化したアニメーション形式です。After Effects でデザイナーが作ったアニメーションを Bodymovin プラグインで JSON 化し、Web / iOS / Android で同じファイルを再生できます。

2026 年の Lottie エコシステム:

- lottie-web — Airbnb 公式 Web ランタイム (最も安定、重め)

- @lottiefiles/react-lottie-player — LottieFiles の React ラッパー

- @lottiefiles/dotlottie-web — dotLottie 形式向けの新ランタイム (Rust + WASM、より高速)

- LottieFiles — 無料 / 有料の巨大なアニメーションライブラリ + エディタ + コラボ

dotLottie は 2022 年に LottieFiles が導入した新形式です。`.lottie` 拡張子で JSON + アセットを ZIP 圧縮しており、従来の `.json` より約 80% 小さく、1 ファイルに複数アニメーションをまとめられ、テーマ / カラー切替などのインタラクティブ機能もサポートします。

基本例:

export function LoadingSpinner() {

return (

src="/animations/loader.lottie"

loop

autoplay

style={{ width: 200, height: 200 }}

/>

)

}

Lottie の強み:

- 業界標準ツールである After Effects をそのまま使える

- 1 回作れば Web / iOS / Android / React Native / Flutter で動く

- LottieFiles に何十万もの無料/有料ライブラリ

- マーケティングページのイラスト、ローディングスピナー、空状態イラストでは圧倒的

短所:

- インタラクティブでない (Rive と対照的に再生のみ)

- 一部の After Effects エフェクトは未対応 (モーションブラー等)

- 大きなアニメーションは `.json` が重くなりがち → dotLottie で解決

韓国・日本の典型的なマーケティングページでは Lottie がほぼ標準です。Toss の採用ページ、LINE のお知らせページ、Yahoo Japan のキャンペーンページはすべて Lottie イラストを使っています。

6. Spline — ブラウザ 3D

Spline は「3D の Figma」と呼ばれるツールです。ブラウザ上で直接 3D モデルを作り、マテリアルを貼り、インタラクションを定義し、React コンポーネントとして export できます。

Spline の主な機能:

- ブラウザベースの 3D エディタ (Blender 不要)

- 無料プランでも無制限 (ウォーターマークなし)

- @splinetool/react-spline で React 埋め込み

- インタラクション (ホバー、クリック、スクロール) をエディタ内で定義

- AR、動画、3D モデル export

基本的な使い方:

export function Hero() {

return (

)

}

Spline が強い領域:

- マーケティングサイトのヒーロー 3D シーン (Vercel、Linear、Arc ブラウザなどが活用)

- デザイナー自身が 3D コンテンツを作りたいとき

- 高速プロトタイピング (Three.js のコードなしで)

短所:

- 複雑な 3D シーン (大量のポリゴン、複雑なシェーダ) には不向き

- ランタイムが重くなりやすい — モバイル最適化に注意

- クラウド依存 (シーンが Spline サーバーにホストされる)

Spline vs Three.js + R3F の選択は単純です。デザイナー主導 + シンプルなシーンなら Spline、開発者主導 + 複雑なシーンなら R3F。

7. Theatre.js — タイムラインエディタ

Theatre.js は Cantor Studios が作ったオープンソースのアニメーションツールです。最大の特徴は「コードとビジュアルエディタを同時に扱う」点です。After Effects のようなタイムライン UI をブラウザ上に表示し、デザイナーがキーフレームを視覚的に調整すると結果が JSON として保存され、コードがそれを再生します。

基本コンセプト:

- Studio — 開発中に使うビジュアルエディタ (本番ビルドからは除外)

- Sheet — 1 シーンのタイムライン

- Object — Sheet 内のアニメーション可能オブジェクト (DOM、R3F mesh など何でも)

基本的な使い方:

// 開発時のみ studio を立ち上げる

if (process.env.NODE_ENV === 'development') {

studio.initialize()

}

const project = getProject('My Animation')

const sheet = project.sheet('Scene 1')

const obj = sheet.object('Logo', {

x: 0,

y: 0,

rotation: 0,

opacity: 1,

})

obj.onValuesChange((values) => {

// values.x, values.y, values.rotation, values.opacity を DOM に反映

logoEl.style.transform = `translate(${values.x}px, ${values.y}px) rotate(${values.rotation}deg)`

logoEl.style.opacity = String(values.opacity)

})

// 再生

sheet.sequence.play()

Theatre.js の強み:

- R3F (React Three Fiber) と統合して 3D シーンを視覚的に操作

- After Effects のようなキーフレーム編集

- 成果物が JSON なので git にコミット可能 → デザイナーと開発者が同じ PR に参加

使う場面:

- 複雑な 3D シーンでカメラモーションを視覚的に調整したいとき

- デザイナー自身がキーフレームを調整したいとき

- マーケティングサイトのスクロール起因のシネマティック

GSAP ScrollTrigger が「コードで定義」なら、Theatre.js は「タイムライン UI で定義 + コードで再生」です。

8. Anime.js 4 — モジュール式に刷新

Anime.js は Julian Garnier 作の軽量アニメーションライブラリで、GSAP の無料代替として長年愛されてきました。2024 年末に v4 がリリースされ、モジュール式アーキテクチャに全面的に書き直されました。

Anime.js 4 の変化:

- モジュール式 import — `animate`、`createTimeline`、`createDraggable`、`stagger` など必要なものだけ import

- ツリーシェイキング対応 — バンドルサイズ削減

- TypeScript 1 級サポート

- spring physics 追加

基本例:

// 単純なトゥイーン

animate('.card', {

translateY: [-20, 0],

opacity: [0, 1],

duration: 600,

delay: stagger(100),

ease: 'outQuad',

})

// タイムライン

const tl = createTimeline({

defaults: { duration: 400, ease: 'outQuad' },

})

tl.add('.header', { translateY: [-50, 0], opacity: [0, 1] })

.add('.subheader', { translateX: [-50, 0], opacity: [0, 1] }, '-=200')

.add('.cta', { scale: [0.8, 1], opacity: [0, 1] }, '-=200')

Anime.js のポジショニング:

- GSAP より軽量で API がシンプル

- Motion ほど React 親和ではないが、Vanilla JS に強い

- 学習コストが低い

- 小〜中規模プロジェクトに最適

GSAP が無料化されたいま Anime.js を選ぶ理由は 2 つに絞られます。(1) GSAP より小さいバンドルが必要、(2) よりシンプルな API が好み。

9. Three.js + R3F — 3D

Three.js は 2010 年に Ricardo Cabello (mr.doob) が公開した、Web 3D の事実上の標準ライブラリです。WebGL 上の抽象化レイヤとして Scene / Camera / Mesh / Material / Light といった馴染みのある 3D 概念を提供します。

2026 年の Three.js エコシステム:

- three (コア) — r170+。WebGPU バックエンドは試験段階

- @react-three/fiber (R3F) — React 親和ラッパー (Poimandres チーム)

- @react-three/drei — R3F 用のユーティリティ集 (カメラコントロール、シェーダ、ヘルパー)

- @react-three/postprocessing — ポストプロセス (ブルーム、DOF、ノイズ)

- @react-three/rapier — Rapier 物理エンジンラッパー

- @react-three/cannon — Cannon-es 物理エンジンラッパー

- leva — R3F 用のデバッグ GUI

R3F の基本パターン:

function SpinningBox() {

const ref = useRef<Mesh>(null)

useFrame((_, delta) => {

if (ref.current) {

ref.current.rotation.x += delta

ref.current.rotation.y += delta * 0.5

}

})

return (

)

}

export function Scene() {

return (

)

}

Three.js と Spline の違い:

- Three.js + R3F — コードベース、自由度無限、学習コスト大

- Spline — GUI ベース、早く結果が出る、自由度に制限

複雑なゲーム / メタバース / データ可視化 (例 Globe.gl、three-globe) は Three.js、マーケティングサイトのヒーロー 3D は Spline、というのが一般的です。

10. Lenis — スムーススクロールの標準

Lenis は Studio Freight (現 Darkroom Engineering) が作ったスムーススクロールライブラリです。2023 年のリリース以来、Web アニメーションの事実上の標準として急速に普及しました。

Lenis の特徴:

- 軽量 (約 3KB)

- ネイティブスクロールイベントと互換 (window の scroll イベントが正常動作)

- モバイル親和

- GSAP ScrollTrigger と完全に共存可能

基本例:

const lenis = new Lenis({

duration: 1.2,

easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),

smoothWheel: true,

})

function raf(time: number) {

lenis.raf(time)

requestAnimationFrame(raf)

}

requestAnimationFrame(raf)

GSAP ScrollTrigger との連携:

lenis.on('scroll', ScrollTrigger.update)

gsap.ticker.add((time) => {

lenis.raf(time * 1000)

})

gsap.ticker.lagSmoothing(0)

使う場面:

- ほぼすべてのマーケティング / ポートフォリオサイト — Awwwards 受賞作の 80% が Lenis または GSAP ScrollSmoother を使用

- スクロール起因のインタラクションが主軸のサイト

使わない方が良い場面:

- アクセシビリティが最優先 — スムーススクロールはキーボード / スクリーンリーダー利用者を混乱させる

- 長文テキスト中心のサイト — 通常スクロールの方が自然

- ユーザーが prefers-reduced-motion を設定している場合は必ず無効化

2026 年のトレンドは「デフォルトで Lenis を入れるが、prefers-reduced-motion を尊重する」です。

11. AutoAnimate / Mo.js / Tween.js — その他

Web アニメーションのフルスタックを全部使うことはまずありませんが、知っておくと良いツールを駆け足で。

AutoAnimate — Formkit のゼロコンフィグ遷移ライブラリ。React/Vue/Svelte のコンテナの子要素が追加 / 削除 / 移動されたとき、自動で滑らかな遷移を付けてくれます。

export function TodoList({ todos }: { todos: string[] }) {

const [parent] = useAutoAnimate()

return (

{todos.map((todo, i) => (

))}

)

}

強みは「1 行で終わる」こと、弱みは自由度がほぼないこと。素早く滑らかさを足したいときに。

Mo.js — モーショングラフィックに特化したライブラリ。パーティクル、バースト、シェイプモーフィングなど「シネマティックなエフェクト」を作るのが得意。ユーザー数は減りましたが、根強いファンがいます。

Tween.js — 最も古いトゥイーンエンジン (2010 年から)。Three.js と併用されることが多い。軽量で精密なトゥイーン制御が必要な場面に。

Popmotion — Motion の前身。現在は Motion に吸収されました。新規なら Motion を使うのが正解です。

react-spring — Pmndrs (Poimandres) の React 用スプリングライブラリ。Motion の spring より自由度が高いですが API が難しい。

Animate.css — 純粋な CSS アニメーションクラス集。最軽量ですが自由度が低い。素早いプロトタイプに。

12. Web Animations API + CSS scroll-driven — ネイティブ

ブラウザが直接サポートするネイティブアニメーション API も 2026 年には非常に強力になりました。ライブラリなしでもかなりのことができます。

Web Animations API (WAAPI) — すべてのモダンブラウザがサポート。

const el = document.querySelector('.box')

const animation = el!.animate(

[

{ transform: 'translateY(0px)', opacity: 1 },

{ transform: 'translateY(-100px)', opacity: 0 },

],

{

duration: 800,

easing: 'cubic-bezier(0.16, 1, 0.3, 1)',

fill: 'forwards',

}

)

animation.onfinish = () => {

console.log('アニメーション終了')

}

Motion のコアは WAAPI 上に構築されているので、Motion を使うことは実質的に WAAPI を効率よく使うことと同じです。

CSS scroll-driven animations — 2024 年後半に Chrome/Edge 105+、Safari 17.5+、Firefox 132+ でサポート開始。JS なしでスクロール駆動のアニメーションを書けます。

@keyframes fade-in {

from {

opacity: 0;

transform: translateY(50px);

}

to {

opacity: 1;

transform: translateY(0);

}

}

.card {

animation: fade-in linear;

animation-timeline: view();

animation-range: entry 0% cover 30%;

}

これ 1 つでスクロールイン時のアニメーションが完成します。GSAP ScrollTrigger 不要。短所は Firefox のサポートが遅かったことと、複雑なインタラクションには限界があることです。

View Transitions API — ページ / ルート遷移時の滑らかなトランジション。Chrome 111+、Safari 18+ でサポート。Next.js や Astro がルート遷移で利用し始めています。

// View Transitions を開始

if ('startViewTransition' in document) {

document.startViewTransition(() => {

// DOM 更新

document.body.classList.toggle('dark-mode')

})

}

2026 年のトレンドは「できるだけネイティブで、足りなければ Motion、それでも足りなければ GSAP」です。

13. デザイン → コード — After Effects → Lottie、Rive Editor、Spline Editor

Web アニメーションツールの真の違いは「デザイナーから開発者へどう渡るか」で決まります。

伝統的なワークフロー — デザイナーが After Effects で作り、開発者が GSAP で再実装。

デザイナー: After Effects (.aep) -> 動画 export (mp4)

開発者: 動画を見て GSAP コードで再実装

結果: デザイナーのモーションと開発者の成果物が乖離、修正の繰り返し

Lottie ワークフロー — After Effects + Bodymovin で JSON を抽出し、そのまま Web / モバイルで再生。

デザイナー: After Effects + Bodymovin -> animation.json

開発者: lottie-web でそのまま再生

結果: デザイナーのモーションがピクセル単位で正確に再現

Rive ワークフロー — Rive Editor で作り、ステートマシンを定義し、.riv を export、ランタイムで入力をバインドするだけ。

デザイナー: Rive Editor -> character.riv (ステートマシン含む)

開発者: @rive-app/react-canvas で input をバインド

結果: デザイナーがインタラクションロジックまで定義、開発者はデータ接続のみ

Spline ワークフロー — Spline Editor で 3D を作り、インタラクションを定義し、scene.splinecode を export。

デザイナー: Spline (3D モデリング + マテリアル + インタラクション)

開発者: @splinetool/react-spline で埋め込み

結果: 3D マーケティングページをデザイナー単独で完成

Theatre.js ワークフロー — コードでオブジェクト定義、ビジュアルエディタでキーフレーム調整、JSON を git にコミット。

開発者: Theatre Studio を起動しオブジェクト定義

デザイナー (または開発者): タイムライン UI でキーフレーム調整 -> save

結果: デザイナーと開発者が同じ PR に参加、JSON でバージョン管理

大型マーケティングキャンペーンは Lottie + GSAP の組み合わせ、プロダクトのインタラクティブキャラクターは Rive、3D ヒーローは Spline、シネマティックなスクロールは Theatre.js + R3F、というのが 2026 年の典型パターンです。

After Effects 以外のデザインツールも次第に統合が進んでいます。Cavalry (モーションデザインツール) は Lottie export をサポートし、Figma も Smart Animate + プラグインで Lottie export 可能。Adobe Animate (旧 Flash) も一部の広告 / ゲーム分野で残っています。

14. 韓国 / 日本のデザインシステム — Toss、Kakao、pixiv、CyberAgent

韓国・日本の大手企業が実際にどのツールを使っているか、事例を見ます。

Toss — Toss デザインシステムのマイクロインタラクションは Framer Motion (Motion) + Lottie がメイン。送金完了後のチェックマーク、ローディングスピナー、広告バナーはほぼ Lottie。ページ遷移やカード入場 / モーダルは Motion。Toss のデザイナーが「Lottie ファイルを .json で正確に書き出す方法」のワークショップを頻繁にやっているという話があります。

Kakao — KakaoTalk の絵文字 (エモティコン) 自体が巨大なアニメーションシステムで、Web (Daum、KakaoBank、KakaoPay) では Lottie + CSS transitions がメイン。KakaoBank のカード展開アニメーションは GSAP として知られています。

LINE — 日本市場では LINE の影響力が圧倒的。LINE スタンプのアニメーションは自社形式 (APNG、その後独自動画形式) で動作し、Web (line.me、LINE Pay 日本) では Lottie が標準。

Yahoo Japan — LINE ヤフー合併後、マーケティングページは Lottie + GSAP の組み合わせ。広告バナーには独自パイプライン (Bodymovin → 内製変換) を使用。

pixiv — 日本のイラスト SNS。pixivision のようなマガジン的なページは GSAP scroll + Lottie イラスト。イラストレーター向けインターフェイスのため、アニメーションは「ユーザーコンテンツを邪魔しないよう」抑制されたトーン。

CyberAgent — 日本の広告・ゲーム大手。子会社 (AbemaTV、Tap Sports Baseball など) は多様なツールを使用。CyberAgent Developers Blog に「Lottie 導入記」「Three.js ゲームページ」などの記事が頻繁に上がります。

SmartNews — 日本のニュースアプリ。Web マーケティングページに Rive インタラクティブキャラクターを使用。

ZOZO — 日本のファッション EC。商品ページの 3D 回転ビューが Three.js ベース。

Baemin (Woowa Brothers) — 韓国のフードデリバリー。マーケティングページに Lottie を積極利用、キャラクター (Baemin 独自書体と組合せ) のインタラクティブモーションで Rive を実験中と言われます。

Daangn (Carrot) — 韓国の中古取引 / 地域コミュニティアプリ。マイクロインタラクションは Framer Motion (Motion) 中心、広告ページに Lottie。

Coupang — 韓国の巨大 EC。パフォーマンス最優先のため重いアニメーションは控えめ。CSS transitions + 一部 Lottie 程度。

NAVER — 韓国の Daum と並ぶ巨大ポータル。自社デザインシステム (Naver D2) で Motion と Lottie が標準化されています。

15. 誰が何を選ぶべきか — マーケティング / プロダクト / ゲーム / 学習教材

最後に用途別の推奨をまとめます。

マーケティングサイト (Awwwards 系、キャンペーンページ)

- 第 1 候補: GSAP 3.13 + ScrollTrigger + Lenis

- イラストは Lottie / dotLottie

- 3D ヒーローは Spline (シンプル) または Three.js + R3F (複雑)

- シネマティックなスクロールは Theatre.js + R3F

プロダクト UI (SaaS、アプリ)

- 第 1 候補: Motion (旧 Framer Motion)

- 自動遷移は AutoAnimate

- ローディング / 空状態は Lottie

- インタラクティブキャラクター (オンボーディング、決済キャラ) は Rive

ゲーム / インタラクティブコンテンツ

- 2D インタラクティブキャラクター — Rive

- 3D ゲーム — Three.js + R3F + Rapier (物理)

- 広告 / ミニゲーム — 自前 canvas + GSAP (タイミング) + Mo.js (エフェクト)

学習教材 / 教育

- インタラクティブ図解 — Rive (ステートマシンが教育に最適)

- コード主導の可視化 — d3.js + Motion

- イラスト — Lottie

パフォーマンス最優先

- ネイティブ CSS animations + scroll-driven animations

- ライブラリが必要なら Motion mini (2.6KB)

- スムーススクロール用に Lenis (3KB) のみ

バンドルサイズ最小化

- Vanilla — Web Animations API + CSS のみ

- ライブラリ 1 つ — Motion または Anime.js 4 modular

- GSAP は無料だが、コア + ScrollTrigger だけで約 50KB

エンタープライズ / 安定性

- GSAP 3.13 — 30 年近い検証

- Lottie (lottie-web) — Airbnb がメンテ

- Motion — Framer がバックアップ

ブランドの統一感

- 1 ツールで一貫性 — Motion (プロダクト + マーケティング)

- または 2 スタック — GSAP (マーケティング) + Motion (プロダクト)

2026 年のベストセットアップは大抵こうなります。Motion でプロダクト UI の 80%、Lottie でイラスト 100%、GSAP + ScrollTrigger + Lenis でマーケティングページのスクロールインタラクション、必要に応じて Rive または Spline。この組み合わせでほぼあらゆるシナリオをカバーできます。

16. 参考 / References

GSAP

- GSAP 公式 — https://gsap.com/

- GSAP 3 cheat sheet — https://gsap.com/cheatsheet/

- ScrollTrigger ドキュメント — https://gsap.com/docs/v3/Plugins/ScrollTrigger/

- "GSAP is Joining Webflow" 発表 (2024-11) — https://gsap.com/blog/webflow-gsap

- "GSAP is now 100% Free" — https://gsap.com/blog/gsap-free

Motion

- Motion 公式 — https://motion.dev/

- Motion for React ドキュメント — https://motion.dev/docs/react

- Motion 発表 (2024-10) — https://motion.dev/blog/introducing-motion

- Framer Motion (legacy) — https://www.framer.com/motion/

Rive

- Rive 公式 — https://rive.app/

- Rive ドキュメント — https://rive.app/community/doc/introduction/docvuOuY7Q3

- @rive-app/react-canvas — https://www.npmjs.com/package/@rive-app/react-canvas

- State Machine ガイド — https://rive.app/community/doc/state-machines/docXOTk6cetD

Lottie

- LottieFiles — https://lottiefiles.com/

- lottie-web (Airbnb) — https://github.com/airbnb/lottie-web

- dotLottie 形式 — https://dotlottie.io/

- @lottiefiles/dotlottie-web — https://www.npmjs.com/package/@lottiefiles/dotlottie-web

Spline

- Spline 公式 — https://spline.design/

- @splinetool/react-spline — https://www.npmjs.com/package/@splinetool/react-spline

- Spline ドキュメント — https://docs.spline.design/

Theatre.js

- Theatre.js 公式 — https://www.theatrejs.com/

- Theatre.js GitHub — https://github.com/theatre-js/theatre

Anime.js

- Anime.js 公式 — https://animejs.com/

- Anime.js GitHub — https://github.com/juliangarnier/anime

Three.js + R3F

- Three.js 公式 — https://threejs.org/

- React Three Fiber (R3F) — https://docs.pmnd.rs/react-three-fiber/

- drei ユーティリティ — https://github.com/pmndrs/drei

Lenis

- Lenis 公式 — https://lenis.darkroom.engineering/

- Lenis GitHub — https://github.com/darkroomengineering/lenis

AutoAnimate / その他

- AutoAnimate (Formkit) — https://auto-animate.formkit.com/

- Mo.js — https://mojs.github.io/

- Tween.js — https://github.com/tweenjs/tween.js

- react-spring — https://react-spring.dev/

Web 標準

- Web Animations API (MDN) — https://developer.mozilla.org/ja/docs/Web/API/Web_Animations_API

- CSS scroll-driven animations (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll-driven_animations

- View Transitions API (MDN) — https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API

デザインシステム / 韓日事例

- Toss Design — https://toss-design.com/

- Kakao Design — https://design.kakao.com/

- CyberAgent Developers Blog — https://developers.cyberagent.co.jp/blog/

- LINE Developers — https://engineering.linecorp.com/ja

- pixiv inside — https://inside.pixiv.blog/