【2025年最新】React/Next.jsアニメーションライブラリ完全ガイド｜デモ付き10選比較

1. なぜアニメーションライブラリが重要なのか

Webアプリケーションにおけるアニメーションは、もはや装飾ではなくUXの本質的要素だ。適切なアニメーションはユーザーの注意を誘導し、状態変化を直感的に伝え、操作の結果をフィードバックする。

React/Next.jsエコシステムでは、2024〜2025年にかけてアニメーションライブラリの勢力図が大きく変化した。Motion（旧Framer Motion）が月間1,600万ダウンロードを超えて事実上の標準となり、GSAP、React Spring、AutoAnimateがそれぞれ得意分野で存在感を示している。

この記事では、主要10ライブラリを実際に動くインタラクティブデモ付きで比較する。各ライブラリの特徴、コード例、適切な使い分けを理解し、プロジェクトに最適な選択ができるようになることが目標だ。

2. 主要ライブラリ比較一覧

まず全体像を把握しよう。以下の比較表で、各ライブラリの位置づけが一目でわかる。

3. Motion（旧Framer Motion） -- 事実上の標準

Motion（旧Framer Motion）は、State of JS 2024調査でReactアニメーション分野トップの使用率を記録した。宣言的APIの<motion.div animate={{ opacity: 1 }} />形式は、Reactの思想と自然に調和する。

バンドルサイズは約32KB（gzip）だが、LazyMotionを使えば必要な機能のみを動的ロードし、6KB程度まで削減可能だ。AnimatePresenceによるマウント/アンマウントアニメーション、layoutプロパティによる自動レイアウトアニメーション、whileHover/whileTapのジェスチャー対応が主要機能となる。

コード例

import { motion } from "motion/react";

function Card() {
  return (
    <motion.div
      whileHover={{ scale: 1.08, rotate: 2 }}
      whileTap={{ scale: 0.95 }}
      transition={{ type: "spring", stiffness: 300 }}
    >
      カードコンテンツ
    </motion.div>
  );
}

4. GSAP（GreenSock） -- 複雑なタイムラインの王者

GSAPはFlash時代から続く業界標準のプロフェッショナルライブラリだ。バンドルサイズ約23KBとMotionより軽量ながら、Timeline機能による複雑なシーケンス制御、ScrollTriggerによるスクロール連動、MorphSVGによるSVGモーフィングなど、機能の幅広さで他を圧倒する。

React統合には@gsap/reactパッケージのuseGSAP()フックを使用する。命令的なAPIのため学習曲線はやや高いが、一度習得すれば最も細やかな制御が可能になる。

コード例

import { useGSAP } from "@gsap/react";
import gsap from "gsap";

function Timeline() {
  const container = useRef(null);
  useGSAP(() => {
    const tl = gsap.timeline();
    tl.to(".bar-1", { width: "100%", duration: 0.4 })
      .to(".bar-2", { width: "85%",  duration: 0.4 })
      .to(".bar-3", { width: "70%",  duration: 0.4 });
  }, { scope: container });

  return <div ref={container}>...</div>;
}

5. React Spring -- 物理ベースの自然な動き

React Spring（GitHub 29,000+ Stars）は、Springアニメーション（バネの物理法則）に特化したライブラリだ。duration（秒数）ではなく、tension（張力）とfriction（摩擦）のパラメータで動きを制御するため、現実世界のような自然な動きが生まれる。

Reactのレンダリングサイクルをバイパスして直接DOM操作を行うため、複雑なチャートやネストされたアニメーションで特にパフォーマンスを発揮する。useSpring、useTrail、useTransitionなどのHooks APIを提供。

コード例

import { useSpring, animated } from "@react-spring/web";

function Ball({ x, y }) {
  const styles = useSpring({
    to: { transform: `translate(${x}px, ${y}px)` },
    config: { tension: 200, friction: 12 },
  });

  return <animated.div style={styles} className="ball" />;
}

6. AutoAnimate -- 超軽量ドロップインソリューション

AutoAnimateはFormKitチームによる超軽量（約2KB）のライブラリで、useAutoAnimate()フックを1行追加するだけで、リストの追加・削除・並び替えに自動でアニメーションが適用される。内部ではFLIP技術を使用している。

設定不要で即座に使用可能な点が最大の強みだ。ただし、直接の子要素のみが対象で、複雑なシーケンスアニメーションには対応していないという制限がある。「とりあえずリストに動きをつけたい」という場面で最適解となる。

コード例

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

function List({ items }) {
  const [parent] = useAutoAnimate();
  return (
    <ul ref={parent}>
      {items.map(item =>
        <li key={item.id}>{item.name}</li>
      )}
    </ul>
  );
}

7. React Three Fiber -- 3D表現の標準

React Three Fiber（R3F、GitHub 29,800+ Stars）は、Three.jsをReactの宣言的構文で記述できるレンダラーだ。Reactのhooks、state、context、suspenseとシームレスに連携し、大規模シーンでも高パフォーマンスを発揮する。

@react-three/drei（Stars 8,500+）は100以上のヘルパーコンポーネントを提供し、OrbitControls、useGLTF、Environment、Textなどを即座に利用できる。@react-three/postprocessingでBloom、DepthOfField等のエフェクトも自動最適化して適用可能だ。

コード例

import { Canvas, useFrame } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";

function RotatingCube() {
  const meshRef = useRef();
  useFrame((_, delta) => {
    meshRef.current.rotation.y += delta;
  });
  return (
    <mesh ref={meshRef}>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color="#667eea" />
    </mesh>
  );
}

function Scene() {
  return (
    <Canvas>
      <ambientLight />
      <RotatingCube />
      <OrbitControls />
    </Canvas>
  );
}

8. スクロールアニメーション -- Lenis + GSAP ScrollTrigger

Lenis（GitHub 12,600+ Stars）は、Awwwards受賞サイトで最も採用されているスムーズスクロールライブラリだ。約4KBと軽量ながら、lerp（線形補間）による滑らかなスクロール、GSAP ScrollTriggerとの完璧な同期を実現する。

GSAP ScrollTriggerと組み合わせることで、スクロール位置に応じたアニメーション制御、要素のピンニング（固定）、scrubによるスクロール同期アニメーションが可能になる。この組み合わせは2024〜2025年のスクロールアニメーションにおける事実上の標準となっている。

MotionもuseScroll、useInView、whileInViewなどのスクロール関連機能を内蔵しており、外部ライブラリなしでスクロールアニメーションを完結させたい場合に適している。軽量構成を目指すなら、react-intersection-observer（約0.6KB）でビューポート検出を行い、CSSアニメーションと組み合わせるアプローチも有効だ。

9. その他注目ライブラリ

Anime.js -- GitHubスター50,000超の定番

2024年にV4メジャーリリースを行い、Web Animations API対応、モジュラーAPI、レスポンシブ対応など大幅に刷新された。約10KBと軽量で、公式React統合はないがcreateScope()とuseEffectを組み合わせて使用できる。

tsParticles -- パーティクルエフェクトの定番

コンフェッティ、花火、雪、インタラクティブリンクなど多数のプリセットを持ち、120+ FPSのスムーズなアニメーションを実現する。

Magic UI & Aceternity UI -- コピペで使えるアニメーションコンポーネント

Magic UI（GitHub 19,000+ Stars）はshadcn/uiと同じコピー&ペースト方式でアニメーションコンポーネントを提供する。Aurora背景、Meteors、テキストエフェクトなど150以上のコンポーネントが無料で利用可能だ。Aceternity UIはより派手な3Dカードエフェクトやパララックススクロールに特化している。

Rive & Lottie -- デザイナー主導のアニメーション

LottieはAfter Effectsで作成したアニメーションをJSONベースで再生するライブラリで広く普及している。一方、RiveはState Machine機能によるインタラクティブなアニメーション制御が可能で、ファイルサイズもLottieの10〜15倍小さい場合がある。複雑なUIアニメーションにはRiveが優位だ。

10. Next.js App Routerとの互換性ガイド

Server Componentsでの制限

アニメーションライブラリはブラウザAPIとDOMに依存するため、Server Componentsでは直接使用できない。useState、useEffect、onClick、window/documentへのアクセスはすべてClient Componentに限定される。

// Server Componentでは使用不可
import { motion } from "motion/react";

// Client Componentに分離する
"use client";
import { motion } from "motion/react";

export function AnimatedBox() {
  return <motion.div animate={{ opacity: 1 }} />;
}

View Transitions APIの台頭

React 19では<ViewTransition>コンポーネントが実験的に利用可能になり、Next.js 15.2+ではexperimental.viewTransitionフラグで有効化できる。JSなしでページ遷移アニメーションが実現できるため、今後の主流技術となる可能性が高い。

CSS Scroll-Driven Animationsもメインスレッド外で実行されるため、JSがブロックされてもアニメーションが継続する利点がある。Motionは内部でこれらのWeb Platform機能を活用し、従来のJSアニメーションより2.5x〜6x高速なハードウェアアクセラレーションを実現している。

11. 用途別推奨ライブラリ早見表

12. よくある質問

まとめ

2024〜2025年のReact/Next.jsアニメーション開発は、Motion（旧Framer Motion）を中心としたエコシステムが確立された時期といえる。宣言的APIとReactとの親和性、SSR対応から、ほとんどのプロジェクトでの第一選択肢となる。

一方で、用途に応じた使い分けの重要性は変わらない。複雑なタイムライン制御にはGSAP、物理ベースの自然な動きにはReact Spring、3D表現にはReact Three Fiberが最適だ。スクロールアニメーションではLenis + GSAP ScrollTriggerの組み合わせが事実上の標準となっている。

関連記事