ReactとGSAPで作る動きのあるWebインターフェース | GUARDIAN Creative BLOG | 初期無料のサブスク型ホームページ制作｜7万実績のWEB戦略とAIで成果を出す

GSAP（GreenSock Animation Platform）は、高度で柔軟なアニメーションを実現できるJavaScriptライブラリです。
DOM要素の移動、フェード、スケール、回転など、あらゆるモーションを滑らかに制御できるのが最大の特長で、多くのプロフェッショナルなWeb制作現場で活用されています。

GSAPは独自のタイムラインやトゥイーン（Tween）制御によって、複雑な動きを簡潔なコードで実装できます。
また、Reactとの相性も抜群です。
ReactではuseRefで要素を参照し、useEffect内でGSAPのアニメーションを発火させることで、コンポーネントライフサイクルに沿った自然なアニメーション制御が可能になります。

さらに、GSAPのScrollTriggerプラグインを活用すれば、スクロールに連動したダイナミックな表現も簡単に導入できます。
つまり、React×GSAPの組み合わせは、洗練されたアニメーションUXを作る上で、非常に理にかなった選択肢なのです。

基本構成とuseRef/useEffectの使い方
ReactとGSAPを連携させる基本構成はシンプルです。
まず、アニメーションさせたい要素をuseRefで参照し、useEffect内でGSAPのアニメーション処理を記述します。
これにより、初回マウント時に一度だけアニメーションを発火させることができます。

jsx
import { useEffect, useRef } from 'react';
import { gsap } from 'gsap';

function AnimatedTitle() {
 const titleRef = useRef(null);

 useEffect(() => {
　gsap.from(titleRef.current, {
　 opacity: 0,
　 y: 20,
　 duration: 1
  });
 }, []);

 return h1 ref={titleRe<f}>ようこそ</h1>;

}

このように、Reactの構造に沿ってアニメーションを組み込めるのがGSAPの強みです。

例①：フェードインのアニメーション
ユーザーの視線を自然に誘導する方法として、フェードインは最も基本的で効果的なアニメーションです。
上記のコードのように、要素のopacityとy（Y軸位置）を調整することで、ふわっと浮かび上がるような演出が可能です。

複数の要素にフェードインを適用する場合は、gsap.utils.toArray()で対象を配列化し、ループ処理でタイミングをずらしながら表示することもできます。

jsx
gsap.utils.toArray('.fade-item').forEach((item, i) => {
 gsap.from(item, {
　opacity: 0,
　y: 20,
　delay: i * 0.2,
　duration: 0.8
 });
});

こうした視差的な動きは、サイトに動的な印象を与え、訪問者の記憶にも残りやすくなります。

例②：スクロール連動アニメーション（ScrollTrigger）
より動きの幅を広げたいなら、GSAPのプラグイン「ScrollTrigger」の活用がおすすめです。
ユーザーのスクロールに応じて、特定の要素をアニメーションさせることができます。

jsx
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);

gsap.from('.section', {
 scrollTrigger: {
　trigger: '.section',
　start: 'top 80%',
　toggleActions: 'play none none reverse'
 },
 opacity: 0,
 y: 50,
 duration: 1
});

このように、triggerやstart、toggleActionsを設定することで、アニメーションの発火タイミングや挙動を柔軟にコントロールできます。
React内でも問題なく動作し、セクションごとの演出に効果的です。

ReactとGSAPを組み合わせることで、ユーザー体験を向上させる多彩なアニメーションを実装できます。
ここでは、実用性の高いパターンをいくつか紹介します。

ナビゲーションメニューの開閉アニメーション
ハンバーガーメニューをタップした際に、メニューがスライドインする演出は定番です。
GSAPを使えば、メニューの表示・非表示に加え、タイミングをずらしたリスト項目の表示なども簡単に制御できます。

jsx
gsap.to('.nav-menu', { x: 0, duration: 0.5 });

コンテンツのフェード＋スライド表示
ページ読み込み時やセクションスクロール時に、テキストや画像がふわっと表示されると、読みやすさと印象が格段に向上します。
opacityとtransform（x/y軸）を組み合わせることで、奥行き感のあるUIに仕上がります。

ホバーアニメーションによるインタラクション強化
ボタンやカードに対するホバー時のスケーリングや色変化も、GSAPなら一行で実装可能です。

jsx
gsap.to(buttonRef.current, { scale: 1.1, duration: 0.2 });
ユーザーのアクションに即応する演出は、クリック率やエンゲージメント向上にも寄与します。

ページ遷移時のアニメーション
React Routerと組み合わせて、ページの切り替えにフェードやスライド効果を加えることで、SPA（Single Page Application）特有の唐突感を緩和できます。

jsx
gsap.from('.page-content', { opacity: 0, duration: 0.5 });
これらの演出は「単なる見た目」ではなく、アニメーションUXを構成する重要な要素です。コンテンツの可視性や直感的な操作性を高めるために、ぜひ積極的に取り入れてみてください。

ReactとGSAPを組み合わせれば、視覚的に魅力的でインタラクティブなWebインターフェースを実現できます。
フェードインやスクロール連動などのアニメーションは、見た目の華やかさだけでなく、ユーザーの行動を促す設計にもつながります。

アニメーションUXの導入は、開発の手間を少し上げる代わりに、UIの印象と効果を大きく高めてくれます。
まずは小さな要素からGSAPを使い始めて、あなたのReactプロジェクトに動きの魔法を取り入れてみましょう。