LabHub

ブログ

Web アニメーションツール 2026 — Rive / Lottie / Spline / Motion / GSAP (MIT 無料化) / Anime.js 4 / Theatre.js 深掘りガイド

2026-05-16 · 29 分で読めます · #web-animation#rive#lottie#spline#motion#framer-motion#gsap#anime-js#theatre-js#three-js#r3f#lenis#autoanimate#web-animations-api#webflow#deep-dive#japanese

한국어English日本語

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

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

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

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 の主な機能をまとめます。

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

import { useRef, useEffect } from 'react'
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import { SplitText } from 'gsap/SplitText'

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 を使うのが良い場面:

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

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

既存の 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 コンポーネントとしての例:

import { motion, AnimatePresence } from 'motion/react'
import { useState } from 'react'

export function Card() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <button onClick={() => setOpen(!open)}>Toggle</button>
      <AnimatePresence>
        {open && (
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -20 }}
            transition={{ type: 'spring', stiffness: 300, damping: 30 }}
          >
            カード内容
          </motion.div>
        )}
      </AnimatePresence>
    </>
  )
}

Vanilla JS ならさらに軽量:

import { animate, scroll } from 'motion'

// 基本のトゥイーン
animate('.card', { opacity: 1, y: 0 }, { duration: 0.5, easing: 'spring' })

// スクロールトリガー
scroll(
  animate('.parallax', { y: [-200, 200] }),
  { target: document.querySelector('.section') }
)

Motion の強み:

Motion を使うのが良い場面:

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

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

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

Rive のコア構成要素:

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

Web での使用例:

import { useRive, useStateMachineInput } from '@rive-app/react-canvas'

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 (
    <div style={{ width: 400, height: 400 }}>
      <RiveComponent
        onMouseEnter={() => {
          if (isChecking) isChecking.value = true
        }}
        onMouseLeave={() => {
          if (isChecking) isChecking.value = false
        }}
      />
    </div>
  )
}

Rive の強み:

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

5. Lottie + dotLottie — Airbnb の標準

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

2026 年の Lottie エコシステム:

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

基本例:

import { DotLottieReact } from '@lottiefiles/dotlottie-react'

export function LoadingSpinner() {
  return (
    <DotLottieReact
      src="/animations/loader.lottie"
      loop
      autoplay
      style={{ width: 200, height: 200 }}
    />
  )
}

Lottie の強み:

短所:

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

6. Spline — ブラウザ 3D

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

Spline の主な機能:

基本的な使い方:

import Spline from '@splinetool/react-spline'

export function Hero() {
  return (
    <main className="h-screen w-full">
      <Spline scene="https://prod.spline.design/abc123/scene.splinecode" />
    </main>
  )
}

Spline が強い領域:

短所:

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

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

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

基本コンセプト:

基本的な使い方:

import { getProject } from '@theatre/core'
import studio from '@theatre/studio'

// 開発時のみ 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 の強み:

使う場面:

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

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

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

Anime.js 4 の変化:

基本例:

import { animate, stagger, createTimeline } from 'animejs'

// 単純なトゥイーン
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 が無料化されたいま 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 エコシステム:

R3F の基本パターン:

import { Canvas, useFrame } from '@react-three/fiber'
import { OrbitControls, Environment } from '@react-three/drei'
import { useRef } from 'react'
import type { Mesh } from 'three'

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 (
    <mesh ref={ref}>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color="orange" />
    </mesh>
  )
}

export function Scene() {
  return (
    <Canvas camera={{ position: [0, 0, 5] }}>
      <ambientLight intensity={0.5} />
      <directionalLight position={[10, 10, 5]} />
      <SpinningBox />
      <Environment preset="sunset" />
      <OrbitControls />
    </Canvas>
  )
}

Three.js と Spline の違い:

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

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

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

Lenis の特徴:

基本例:

import Lenis from 'lenis'

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 との連携:

import { ScrollTrigger } from 'gsap/ScrollTrigger'

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

gsap.ticker.add((time) => {
  lenis.raf(time * 1000)
})
gsap.ticker.lagSmoothing(0)

使う場面:

使わない方が良い場面:

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

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

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

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

import { useAutoAnimate } from '@formkit/auto-animate/react'

export function TodoList({ todos }: { todos: string[] }) {
  const [parent] = useAutoAnimate()

  return (
    <ul ref={parent}>
      {todos.map((todo, i) => (
        <li key={i}>{todo}</li>
      ))}
    </ul>
  )
}

強みは「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 系、キャンペーンページ)

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

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

学習教材 / 教育

パフォーマンス最優先

バンドルサイズ最小化

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

ブランドの統一感

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

16. 参考 / References

GSAP

Motion

Rive

Lottie

Spline

Theatre.js

Anime.js

Three.js + R3F

Lenis

AutoAnimate / その他

Web 標準

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

原文を読む: https://www.youngju.dev/blog/culture/2026-05-16-web-animation-tools-2026-rive-lottie-spline-motion-gsap-mit-anime-js-theatre-deep-dive.ja

コメント

まだコメントはありません。

ログインするとコメントできます