Web 開発においてアニメーションは、単なる装飾ではなく、ユーザー体験を大きく左右する重要な要素となっています。特に React アプリケーションにおいて、2025 年は従来の手法を超えた新しいアニメーション実装が求められる時代になりました。

この記事では、最新の React アニメーション技術と実装手法について、実際のコード例とともに詳しく解説いたします。初心者の方でも理解しやすいよう、基本的な概念から最新のライブラリ活用法まで、段階的にご紹介していきますね。

背景

React アニメーションの進化

React のアニメーション実装は、この数年で劇的な進化を遂げています。初期の React では、CSSTransitionGroup を使った基本的なアニメーションが主流でしたが、現在では専用ライブラリの充実により、より豊かな表現が可能になりました。

2023 年から 2024 年にかけて、以下のような大きな変化がありました。

項目	従来	2025 年現在
主要ライブラリ	React Transition Group	Framer Motion v12, React Spring 9.x
パフォーマンス	DOM 操作中心	GPU 加速、Web Workers 活用
実装方法	CSS + JavaScript	宣言的 API、コンポーネントベース
ブラウザ対応	限定的	Web Animations API 標準対応

特に注目すべきは、React 19 の登場により、Concurrent Features とアニメーションの組み合わせが実用的になったことです。これにより、従来は困難だった複雑なアニメーション処理も、パフォーマンスを維持しながら実装できるようになりました。

2025 年に求められるアニメーション体験

現代のユーザーは、ネイティブアプリのような滑らかで直感的なアニメーションを期待しています。特に重要なのは以下の要素です。

パフォーマンス重視の設計 60FPS を維持しながら、バッテリー消費を抑える効率的なアニメーション実装が必要です。

アクセシビリティへの配慮 prefers-reduced-motionへの対応は必須となり、視覚障害や前庭障害を持つユーザーへの配慮が重要になっています。

レスポンシブ対応 デスクトップからモバイルまで、デバイスに応じた最適なアニメーション体験の提供が求められています。

課題

従来のアニメーション実装の問題点

多くの開発者が直面する課題として、以下のような問題があります。

複雑な状態管理 アニメーションの開始、進行、完了を適切に管理することは思った以上に複雑です。特に、ユーザーの操作により中断される可能性のあるアニメーションでは、状態の整合性を保つのが困難でした。

typescriptCopy code// よくある問題のあるコード例
const [isAnimating, setIsAnimating] = useState(false);
const [animationStep, setAnimationStep] = useState(0);

useEffect(() => {
  if (isAnimating) {
    const timer = setTimeout(() => {
      setAnimationStep((step) => step + 1);
      // この時点で既にコンポーネントがアンマウントされている可能性がある
    }, 1000);

    return () => clearTimeout(timer);
  }
}, [isAnimating, animationStep]); // 依存配列の管理が複雑

パフォーマンスの問題 不適切な実装により、フレームドロップやメモリリークが発生することがよくあります。

javascriptCopy code// パフォーマンスを悪化させる典型例
const BadAnimation = () => {
  const [position, setPosition] = useState(0);

  useEffect(() => {
    const animate = () => {
      setPosition((prev) => prev + 1); // 毎フレーム再レンダリングが発生
      requestAnimationFrame(animate);
    };
    animate();
  }, []);

  return (
    <div
      style={{ transform: `translateX(${position}px)` }}
    />
  );
};

ブラウザ互換性の問題 特にモバイルブラウザにおいて、アニメーションのちらつきや予期しない動作が発生することがありました。

パフォーマンスとユーザビリティの両立

美しいアニメーションを実装しつつ、パフォーマンスを維持することは常に課題となっています。

レイアウトシフトの回避 アニメーション中にレイアウトが変化することで、Cumulative Layout Shift（CLS）スコアが悪化する問題があります。

メモリ使用量の最適化 複数のアニメーションが同時実行される際の、メモリ使用量の急増も深刻な問題です。

解決策

最新ライブラリとアプローチ

2025 年の最新技術を活用することで、これらの課題を効果的に解決できます。

宣言的アニメーション 命令的な処理ではなく、宣言的にアニメーションを定義することで、可読性と保守性が大幅に向上します。

GPU 加速の活用 transformとopacityプロパティを中心とした実装により、ブラウザの GPU 加速を最大限活用できます。

Component-based Architecture アニメーション機能をコンポーネント化することで、再利用性と保守性を高めることができます。

実装戦略の選び方

プロジェクトの要件に応じて、適切なアプローチを選択することが重要です。

要件	推奨ライブラリ	特徴
複雑な UI 遷移	Framer Motion	宣言的 API、豊富な機能
物理ベースアニメーション	React Spring	自然な動き、高性能
軽量実装	Web Animations API	ネイティブ、軽量
高度な制御	GSAP	最高レベルの制御性
デザインツール連携	Lottie	After Effects との連携

具体例

Framer Motion v12 の新機能活用

Framer Motion v12 では、パフォーマンスの大幅な改善と新機能が追加されました。

Auto Layout Animations レイアウト変更時の自動アニメーションが更に改善され、複雑なレイアウト変更もスムーズに処理できます。

typescriptCopy codeimport { motion, AnimatePresence } from 'framer-motion';
import { useState } from 'react';

const AutoLayoutExample = () => {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <motion.div
      layout // レイアウト変更を自動でアニメーション
      className={`card ${
        isExpanded ? 'expanded' : 'collapsed'
      }`}
      onClick={() => setIsExpanded(!isExpanded)}
      transition={{
        layout: { duration: 0.3, ease: 'easeInOut' },
      }}
    >
      <motion.h2 layout='position'>
        カードタイトル
      </motion.h2>
      <AnimatePresence>
        {isExpanded && (
          <motion.div
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: 'auto' }}
            exit={{ opacity: 0, height: 0 }}
            transition={{ duration: 0.3 }}
          >
            <p>
              展開されるコンテンツがここに表示されます。
            </p>
            <p>
              複数の段落がある場合でも、自然にアニメーションします。
            </p>
          </motion.div>
        )}
      </AnimatePresence>
    </motion.div>
  );
};

Scroll-triggered Animations スクロール連動アニメーションの実装がより簡単になりました。

typescriptCopy codeimport {
  motion,
  useScroll,
  useTransform,
} from 'framer-motion';
import { useRef } from 'react';

const ScrollAnimationExample = () => {
  const containerRef = useRef<HTMLDivElement>(null);
  const { scrollYProgress } = useScroll({
    target: containerRef,
    offset: ['start end', 'end start'],
  });

  // スクロール進行度に応じて値を変換
  const y = useTransform(
    scrollYProgress,
    [0, 1],
    [100, -100]
  );
  const opacity = useTransform(
    scrollYProgress,
    [0, 0.5, 1],
    [0, 1, 0]
  );
  const scale = useTransform(
    scrollYProgress,
    [0, 0.5, 1],
    [0.8, 1, 0.8]
  );

  return (
    <div ref={containerRef} className='scroll-container'>
      <motion.div
        style={{ y, opacity, scale }}
        className='animated-element'
      >
        <h3>スクロールで動くコンテンツ</h3>
        <p>
          スクロール位置に応じて、位置・透明度・スケールが変化します。
        </p>
      </motion.div>
    </div>
  );
};

よくあるエラーと解決法

Framer Motion 実装時によく遭遇するエラーとその解決法をご紹介します。

bashCopy code# Error: Cannot read properties of undefined (reading 'current')
# 原因: refが初期化される前にアニメーションが実行される

typescriptCopy code// 解決法: refの存在確認を追加
const { scrollYProgress } = useScroll({
  target: containerRef,
  offset: ['start end', 'end start'],
});

// refが存在しない場合の処理を追加
useEffect(() => {
  if (!containerRef.current) return;

  // アニメーション処理
}, []);

React Spring 9.x の高度な活用法

React Spring 9.x では、物理ベースのアニメーションがさらに進化しています。

Chain Animations 複数のアニメーションを連鎖させる実装が簡単になりました。

typescriptCopy codeimport {
  useChain,
  useSpringRef,
  useSpring,
  animated,
} from 'react-spring';
import { useState } from 'react';

const ChainAnimationExample = () => {
  const [isOpen, setIsOpen] = useState(false);

  // 各アニメーションのref
  const springRef = useSpringRef();
  const spring = useSpring({
    ref: springRef,
    from: { size: '20%', background: '#ff6d6d' },
    to: {
      size: isOpen ? '100%' : '20%',
      background: isOpen ? '#88d8b0' : '#ff6d6d',
    },
  });

  const transRef = useSpringRef();
  const transition = useSpring({
    ref: transRef,
    from: { opacity: 0, transform: 'scale(0)' },
    to: {
      opacity: isOpen ? 1 : 0,
      transform: isOpen ? 'scale(1)' : 'scale(0)',
    },
  });

  // アニメーションの実行順序を制御
  useChain(
    isOpen ? [springRef, transRef] : [transRef, springRef],
    isOpen ? [0, 0.2] : [0, 0.6]
  );

  return (
    <div className='chain-container'>
      <animated.div
        style={{
          width: spring.size,
          height: spring.size,
          backgroundColor: spring.background,
        }}
        className='animated-box'
        onClick={() => setIsOpen(!isOpen)}
      >
        <animated.div
          style={transition}
          className='inner-content'
        >
          <p>クリックして開閉</p>
        </animated.div>
      </animated.div>
    </div>
  );
};

Gesture Integration タッチジェスチャーとの連携も簡単に実装できます。

typescriptCopy codeimport { useDrag } from 'react-use-gesture';
import { useSpring, animated } from 'react-spring';

const DragAnimationExample = () => {
  const [{ x, y, rotateZ, scale }, api] = useSpring(() => ({
    x: 0,
    y: 0,
    rotateZ: 0,
    scale: 1,
  }));

  const bind = useDrag(
    ({
      active,
      movement: [mx, my],
      direction,
      velocity,
    }) => {
      api.start({
        x: active ? mx : 0,
        y: active ? my : 0,
        rotateZ: active ? mx / 2 : 0,
        scale: active ? 1.1 : 1,
        config: {
          tension: active ? 800 : 500,
          friction: 50,
        },
      });
    }
  );

  return (
    <animated.div
      {...bind()}
      style={{
        x,
        y,
        scale,
        rotateZ,
        touchAction: 'none', // タッチスクロールを無効化
      }}
      className='draggable-element'
    >
      <p>ドラッグして動かせます</p>
    </animated.div>
  );
};

Web Animations API と React の組み合わせ

Web Animations API は、ブラウザネイティブの高性能なアニメーション機能です。

typescriptCopy codeimport { useRef, useEffect } from 'react';

const WebAnimationsExample = () => {
  const elementRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const element = elementRef.current;
    if (!element) return;

    // アニメーションの定義
    const animation = element.animate(
      [
        { transform: 'translateY(0px)', opacity: 1 },
        {
          transform: 'translateY(-20px)',
          opacity: 0.7,
          offset: 0.3,
        },
        { transform: 'translateY(0px)', opacity: 1 },
      ],
      {
        duration: 2000,
        iterations: Infinity,
        easing: 'cubic-bezier(0.4, 0, 0.6, 1)',
      }
    );

    // アニメーションの制御
    const handleMouseEnter = () => animation.pause();
    const handleMouseLeave = () => animation.play();

    element.addEventListener(
      'mouseenter',
      handleMouseEnter
    );
    element.addEventListener(
      'mouseleave',
      handleMouseLeave
    );

    return () => {
      animation.cancel();
      element.removeEventListener(
        'mouseenter',
        handleMouseEnter
      );
      element.removeEventListener(
        'mouseleave',
        handleMouseLeave
      );
    };
  }, []);

  return (
    <div ref={elementRef} className='web-animation-element'>
      <p>ホバーでアニメーション一時停止</p>
    </div>
  );
};

カスタムフック化 Web Animations API を React らしく使うためのカスタムフックを作成できます。

typescriptCopy codeimport { useRef, useEffect, useCallback } from 'react';

type AnimationOptions = {
  keyframes: Keyframe[];
  options: KeyframeAnimationOptions;
};

const useWebAnimation = ({
  keyframes,
  options,
}: AnimationOptions) => {
  const elementRef = useRef<HTMLElement>(null);
  const animationRef = useRef<Animation | null>(null);

  useEffect(() => {
    const element = elementRef.current;
    if (!element) return;

    animationRef.current = element.animate(
      keyframes,
      options
    );

    return () => {
      animationRef.current?.cancel();
    };
  }, [keyframes, options]);

  const play = useCallback(
    () => animationRef.current?.play(),
    []
  );
  const pause = useCallback(
    () => animationRef.current?.pause(),
    []
  );
  const cancel = useCallback(
    () => animationRef.current?.cancel(),
    []
  );

  return { elementRef, play, pause, cancel };
};

// 使用例
const CustomAnimationExample = () => {
  const { elementRef, play, pause } = useWebAnimation({
    keyframes: [
      { transform: 'scale(1)', backgroundColor: '#3b82f6' },
      {
        transform: 'scale(1.2)',
        backgroundColor: '#ef4444',
      },
      { transform: 'scale(1)', backgroundColor: '#3b82f6' },
    ],
    options: {
      duration: 1000,
      iterations: Infinity,
    },
  });

  return (
    <div className='custom-animation-container'>
      <div ref={elementRef} className='animated-element'>
        アニメーション要素
      </div>
      <div className='controls'>
        <button onClick={play}>再生</button>
        <button onClick={pause}>一時停止</button>
      </div>
    </div>
  );
};

GSAP × React 最適化テクニック

GSAP は最も強力なアニメーションライブラリの一つです。React との組み合わせでは、適切な実装パターンが重要になります。

Timeline Management 複雑なアニメーションシーケンスを管理するためのパターンです。

typescriptCopy codeimport { gsap } from 'gsap';
import { useRef, useEffect, useLayoutEffect } from 'react';

const GSAPTimelineExample = () => {
  const containerRef = useRef<HTMLDivElement>(null);
  const timelineRef = useRef<gsap.core.Timeline>();

  useLayoutEffect(() => {
    const ctx = gsap.context(() => {
      // タイムラインの作成
      timelineRef.current = gsap
        .timeline({ paused: true })
        .from('.box1', {
          duration: 0.5,
          x: -100,
          opacity: 0,
        })
        .from(
          '.box2',
          { duration: 0.5, y: -100, opacity: 0 },
          '-=0.3'
        )
        .from(
          '.box3',
          { duration: 0.5, rotation: 180, opacity: 0 },
          '-=0.3'
        )
        .to(
          '.container',
          { duration: 0.3, scale: 1.05 },
          '-=0.2'
        )
        .to('.container', { duration: 0.3, scale: 1 });
    }, containerRef);

    return () => ctx.revert();
  }, []);

  const playAnimation = () => {
    timelineRef.current?.restart();
  };

  return (
    <div ref={containerRef}>
      <div className='container'>
        <div className='box1'>Box 1</div>
        <div className='box2'>Box 2</div>
        <div className='box3'>Box 3</div>
      </div>
      <button onClick={playAnimation}>
        アニメーション開始
      </button>
    </div>
  );
};

ScrollTrigger Integration スクロール連動アニメーションの高度な実装です。

typescriptCopy codeimport { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { useRef, useLayoutEffect } from 'react';

gsap.registerPlugin(ScrollTrigger);

const GSAPScrollExample = () => {
  const containerRef = useRef<HTMLDivElement>(null);

  useLayoutEffect(() => {
    const ctx = gsap.context(() => {
      // パララックス効果
      gsap.to('.parallax-bg', {
        yPercent: -50,
        ease: 'none',
        scrollTrigger: {
          trigger: '.parallax-container',
          start: 'top bottom',
          end: 'bottom top',
          scrub: true,
        },
      });

      // 要素の順次表示
      gsap.fromTo(
        '.fade-in-element',
        {
          opacity: 0,
          y: 50,
        },
        {
          opacity: 1,
          y: 0,
          duration: 0.8,
          stagger: 0.2,
          scrollTrigger: {
            trigger: '.fade-in-container',
            start: 'top 80%',
            toggleActions: 'play none none reverse',
          },
        }
      );
    }, containerRef);

    return () => ctx.revert();
  }, []);

  return (
    <div ref={containerRef}>
      <div className='parallax-container'>
        <div className='parallax-bg'>
          <img src='/background.jpg' alt='Background' />
        </div>
        <div className='content'>
          <h2>パララックス効果</h2>
        </div>
      </div>

      <div className='fade-in-container'>
        <div className='fade-in-element'>要素 1</div>
        <div className='fade-in-element'>要素 2</div>
        <div className='fade-in-element'>要素 3</div>
      </div>
    </div>
  );
};

よくあるエラーと対処法

bashCopy code# Error: Cannot read properties of null (reading 'getBoundingClientRect')
# 原因: DOM要素が存在しない状態でアニメーションを実行

typescriptCopy code// 解決法: gsap.contextを使用した適切なクリーンアップ
useLayoutEffect(() => {
  const ctx = gsap.context(() => {
    // アニメーション処理
    if (containerRef.current) {
      gsap.from('.element', { opacity: 0, duration: 1 });
    }
  }, containerRef); // コンテキストにrefを渡す

  return () => ctx.revert(); // 必ずクリーンアップ
}, []);

Lottie アニメーションの効果的な実装

Lottie を使用することで、After Effects で作成した高品質なアニメーションを Web で再生できます。

基本的な実装

typescriptCopy codeimport Lottie from 'lottie-react';
import { useState, useRef } from 'react';
import animationData from './animations/loading.json';

const LottieExample = () => {
  const [isPlaying, setIsPlaying] = useState(true);
  const lottieRef = useRef<any>(null);

  const handleTogglePlay = () => {
    if (isPlaying) {
      lottieRef.current?.pause();
    } else {
      lottieRef.current?.play();
    }
    setIsPlaying(!isPlaying);
  };

  const handleComplete = () => {
    console.log('アニメーション完了');
    // 完了後の処理
  };

  return (
    <div className='lottie-container'>
      <Lottie
        lottieRef={lottieRef}
        animationData={animationData}
        loop={true}
        autoplay={true}
        style={{ width: 300, height: 300 }}
        onComplete={handleComplete}
      />
      <div className='controls'>
        <button onClick={handleTogglePlay}>
          {isPlaying ? '一時停止' : '再生'}
        </button>
      </div>
    </div>
  );
};

インタラクティブな Lottie アニメーション

typescriptCopy codeimport Lottie from 'lottie-react';
import { useRef, useEffect } from 'react';
import interactiveAnimation from './animations/interactive.json';

const InteractiveLottieExample = () => {
  const lottieRef = useRef<any>(null);

  // マウス位置に応じてアニメーションを制御
  const handleMouseMove = (event: React.MouseEvent) => {
    const rect =
      event.currentTarget.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const progress = x / rect.width;

    // アニメーションの進行度を設定（0から1の間）
    lottieRef.current?.goToAndStop(
      Math.floor(
        progress * lottieRef.current.getDuration(true)
      ),
      true
    );
  };

  return (
    <div
      className='interactive-lottie'
      onMouseMove={handleMouseMove}
    >
      <Lottie
        lottieRef={lottieRef}
        animationData={interactiveAnimation}
        loop={false}
        autoplay={false}
        style={{ width: 400, height: 300 }}
      />
      <p>マウスを左右に動かしてください</p>
    </div>
  );
};

パフォーマンス最適化

typescriptCopy codeimport Lottie from 'lottie-react';
import { useMemo, useCallback } from 'react';

const OptimizedLottieExample = () => {
  // アニメーションデータをメモ化
  const animationData = useMemo(
    () => require('./animations/optimized.json'),
    []
  );

  // レンダラー設定でパフォーマンスを最適化
  const lottieOptions = useMemo(
    () => ({
      animationData,
      loop: true,
      autoplay: true,
      rendererSettings: {
        preserveAspectRatio: 'xMidYMid slice',
        clearCanvas: false, // パフォーマンス向上
        progressiveLoad: true, // 段階的読み込み
        hideOnTransparent: true, // 透明時は非表示
      },
    }),
    [animationData]
  );

  const handleEnterFrame = useCallback((event: any) => {
    // フレーム毎の処理が必要な場合のみ使用
    if (event.currentTime % 30 === 0) {
      // 30フレーム毎
      console.log('フレーム処理:', event.currentTime);
    }
  }, []);

  return (
    <Lottie
      {...lottieOptions}
      style={{ width: 200, height: 200 }}
      onEnterFrame={handleEnterFrame}
    />
  );
};

よく発生するエラーと解決法

bashCopy code# Error: Cannot read properties of undefined (reading 'v')
# 原因: Lottieファイルが破損しているか、形式が正しくない

typescriptCopy code// 解決法: エラーハンドリングを追加
const SafeLottieExample = () => {
  const [hasError, setHasError] = useState(false);

  const handleLoadError = useCallback(() => {
    console.error(
      'Lottieアニメーションの読み込みに失敗しました'
    );
    setHasError(true);
  }, []);

  if (hasError) {
    return (
      <div className='fallback'>
        アニメーションを読み込めませんでした
      </div>
    );
  }

  return (
    <Lottie
      animationData={animationData}
      onLoadError={handleLoadError}
      // その他のprops
    />
  );
};

まとめ

2025 年の React アニメーション実装指針

2025 年の React アニメーション開発において、以下のポイントを押さえることが成功の鍵となります。

技術選択の指針 プロジェクトの要件に応じて適切なライブラリを選択し、一貫性のある実装を心がけることが重要です。複雑なアニメーションが必要な場合は Framer Motion や GSAP、軽量な実装には Web Animations API を活用しましょう。

パフォーマンスファースト 美しさと高速性を両立させるため、GPU 加速を意識した実装と、適切なメモ化戦略を採用することが必要です。特に、transformとopacityを中心とした実装により、60FPS を維持できます。

アクセシビリティの配慮 prefers-reduced-motionへの対応は必須であり、すべてのユーザーが快適に利用できるアニメーション実装を心がけることが大切です。

保守性の向上 コンポーネント化とカスタムフックの活用により、再利用可能で保守性の高いアニメーション実装を目指しましょう。

これらの技術を適切に活用することで、ユーザーに喜ばれる魅力的な Web アプリケーションを構築できるはずです。継続的な学習と実践を通じて、さらなるスキルアップを図っていきましょう。

関連リンク

• Framer Motion 公式ドキュメント
• React Spring 公式サイト
• Web Animations API - MDN
• GSAP 公式ドキュメント
• Lottie React GitHub
• React 公式ドキュメント
• Can I Use - アニメーション関連ブラウザサポート