React + GSAPの使い方についてChat-GPTに尋ねてみた

これからポートフォリオ作成に当たって技術の選定を行っている際に
フロントエンドエンジニアを志望している以上、Reactのようなライブラリを使用する他なし
と思ったのだが、Vanila JSでGSAPを扱ったことはあってもReactでアニメーション系のライブラリ
(特にスクロールイベント関連)の実装に不安があったので、今話題のChat-GPTに尋ねてみた。
※Reactを学び始めて同じような壁を感じている人がいるはずと思い記事にしました。

まずはReactとGSAPの親和性について尋ねました。

ReactとGSapの親和性について聞きたい

ReactとGSAPの親和性は非常に高く、両者はよく組み合わせて使用されます。ReactはUIをコンポーネント化して管理するためのライブラリであり、GSAPはアニメーションを制御するためのライブラリであるため、Reactで構築したUIにGSAPを使用することで、複雑なアニメーションを簡単に実装することができます。
GSAPはTweenMaxやTimelineMaxなどのライブラリがあり、これらをReactのコンポーネント内で使用することができます。例えば、ReactのライフサイクルメソッドであるcomponentDidMount()やcomponentDidUpdate()内で、TweenMaxやTimelineMaxを使用してアニメーションを実行することができます。
また、GSAPにはReactとの親和性を高めるための公式プラグインも存在します。例えば、react-gsap-enhancerというプラグインは、ReactとGSAPの連携を簡単に行うことができます。
以上のように、ReactとGSAPは非常に相性がよく、一緒に使うことで、より高度なアニメーションを実現することができます。

親和性について非常によく、Reactとの連携が簡単なのがまずは理解できました。
次にサンプルコードを見たいと質問します。

簡単な記述方法をコードで知りたい

import React, { useRef, useEffect } from 'react';
import { TweenMax, Power3 } from 'gsap';

const ExampleComponent = () => {
  // GSAPを使用するためのrefを定義
  const boxRef = useRef(null);

  useEffect(() => {
    // コンポーネントがマウントされた後に実行される処理
    TweenMax.from(boxRef.current, 1, { opacity: 0, y: -50, ease: Power3.easeOut });
  }, []);

  return (
    <div ref={boxRef}>
      {/* アニメーションを適用したい要素 */}
      <p>Hello, GSAP!</p>
    </div>
  );
};

export default ExampleComponent;

上記の例では、useRefフックを使用して、アニメーションを適用したい要素をrefとして取得しています。そして、useEffectフックを使用して、コンポーネントがマウントされた後に実行されるTweenMaxのアニメーションを定義しています。
TweenMax.from()メソッドは、第1引数にアニメーションを適用したい要素を指定し、第2引数にアニメーションの時間を、第3引数にアニメーションのプロパティを指定します。上記の例では、opacityとyのプロパティにアニメーションが適用され、easeプロパティにはPower3.easeOutというイージング関数が指定されています。
このように、ReactとGSAPを組み合わせて使用することで、アニメーションを簡単に実装することができます。

ここでReactのuseRef()を頻繁に使用して、
コンポーネント単位で定義していくんだなぁー程度に理解しました。

１つのコンポーネントごとにGSAPのアニメーションを定義していくスタイルですか？

GSAPのアニメーションをReactで実装する場合、一般的には以下のようなスタイルで実装することが多いです。

1.コンポーネント単位でアニメーションを定義する
2.コンポーネントがマウントされたタイミングでアニメーションを実行する
3.アニメーションが完了したら、コンポーネントの状態を更新する

上記のスタイルでは、各コンポーネントでアニメーションを定義していきます。各コンポーネントにおいて、アニメーションの内容は状態やプロパティに基づいて変化することが多いため、コンポーネントごとにアニメーションを定義することで、柔軟にアニメーションを制御することができます。
また、コンポーネントがマウントされたタイミングでアニメーションを実行することで、初回表示時にアニメーションが実行されます。アニメーションが完了したら、コンポーネントの状態を更新することで、アニメーション後の表示状態を制御することができます。
ただし、複数のコンポーネントが同時にアニメーションを実行する場合は、それらのコンポーネントをまとめて制御するためのアニメーション管理用のコンポーネントを作成することもあります。

「複数のコンポーネントが同時にアニメーションを実行する場合は、それらのコンポーネントをまとめて制御するためのアニメーション管理用のコンポーネントを作成することもあります。」についてあまり理解が追い付かなかったため深堀します。

複数のコンポーネントが同時にアニメーションを実行する場合は、それらのコンポーネントをまとめて制御するためのアニメーション管理用のコンポーネントを作成することもあります。について詳しく

複数のコンポーネントが同時にアニメーションを実行する場合は、それらのコンポーネントをまとめて制御するためのアニメーション管理用のコンポーネントを作成することがあります。
例えば、複数のコンポーネントをアニメーションで切り替えるような場合や、複数のコンポーネントを同時にアニメーションで移動させるような場合には、それらのコンポーネントをまとめて制御することで、よりスムーズなアニメーションを実現することができます。
このような場合には、アニメーション管理用のコンポーネントを作成し、そのコンポーネントで各コンポーネントのアニメーションを管理することが一般的です。具体的には、アニメーション管理用のコンポーネントで各コンポーネントに必要なプロパティを設定し、アニメーションを制御することで、複数のコンポーネントを同時に制御することができます。
また、アニメーション管理用のコンポーネントで、各コンポーネントがアニメーションを開始するタイミングやアニメーションの終了を監視することで、より正確なアニメーション制御が可能になります。
なお、アニメーション管理用のコンポーネントは、必要に応じて再利用可能な形で作成することができます。これにより、アニメーションの実装やメンテナンスの効率化が可能になります。

なるほど、ここで内容が固まりつつあります。

コードも交えて確認したい

以下は、ReactとGSAPを組み合わせたアニメーション管理用コンポーネントの例です。この例では、AnimationControllerというコンポーネントを作成し、子要素としてアニメーションを実行したいコンポーネントを指定します。AnimationControllerは、子要素のマウント時にアニメーションを開始し、アンマウント時にアニメーションを停止します。

import React, { useEffect, useRef } from "react";
import gsap from "gsap";

const AnimationController = ({ children }) => {
  const containerRef = useRef(null);
  const timeline = useRef(null);

  useEffect(() => {
    timeline.current = gsap.timeline({ paused: true });
    React.Children.forEach(children, (child) => {
      const { duration, delay, ...vars } = child.props.animation;
      timeline.current.fromTo(child.ref.current, { opacity: 0 }, { opacity: 1, duration, delay, ...vars }, child.props.startTime);
    });
  }, [children]);

  useEffect(() => {
    if (containerRef.current) {
      timeline.current.play();
    }
    return () => {
      timeline.current.kill();
    };
  }, [containerRef]);

  return <div ref={containerRef}>{children}</div>;
};

export default AnimationController;

上記のコンポーネントは、子要素に指定されたanimationとstartTimeを使用して、GSAPタイムラインを作成します。子要素がマウントされると、タイムラインにアニメーションを追加します。また、containerRefを使用して、コンポーネント自体のマウント状態をトラックし、コンポーネントがアンマウントされたときにアニメーションを停止します。
以下は、AnimationControllerを使用したサンプルコードの例です。この例では、Boxコンポーネントにアニメーションを設定し、それらのコンポーネントをAnimationControllerに渡して、同時にアニメーションを開始します。

import React from "react";
import AnimationController from "./AnimationController";
import Box from "./Box";

const App = () => {
  return (
    <AnimationController>
      <Box animation={{ duration: 1, x: 100 }} startTime={0} />
      <Box animation={{ duration: 1, y: 100 }} startTime={0} />
      <Box animation={{ duration: 1, x: -100 }} startTime={1} />
      <Box animation={{ duration: 1, y: -100 }} startTime={1} />
    </AnimationController>
  );
};

export default App;

上記の例では、Boxコンポーネントにアニメーションを指定して、それらのコンポーネントをAnimationControllerに渡しています。startTimeプロパティは、アニメーションが開始される時間を指定します。最初の2つのBoxコンポーネントは同時にアニメーションを開始

途中で説明が途切れてしまったいるが、内容としては
親要素にアニメーションの設定を記述、子要素に具体的なアニメーションを定義する
事をまとめてコンポーネントを制御すると説明していたと理解しました。

AnimationControllerはアニメーションのライフサイクルを用意してBox自身が詳細なアニメーションを実行しているようなイメージ？

質問が合っているか定かではないですが、Chat-GPTは汲み取って回答してくれました。

はい、そのように考えることができます。AnimationControllerでサイト全体のアニメーションを制御し、Boxで詳細なアニメーションを記述し、さらにその中にアニメーションをさせたい要素を取り除くことで、全体としてスムーズなアニメーションをBoxは単一の要素に対してのアニメーションを記述するのに適していおり、AnimationControllerでBoxを含めることで、複数のBoxをまとめて制御することができます。

ここまでアニメーションの設定方法について確認しました。
次にスクロールトリガーについて質問します。

質問を変更します。　GSAPを用いたスクロール感知についての記載方法が知りたい

GSAPを用いたスクロール感知には、ScrollTriggerというツールがあります。ScrollTriggerを使用すると、スクロールイベントを検出して、それに応じたアニメーションを実行することができます。
例えば、以下のようにScrollTriggerを使用して、スクロールイベントを感知し、要素をフェードインさせるアニメーションを実行することができます。

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

// ScrollTriggerをGSAPにプラグインとして登録
gsap.registerPlugin(ScrollTrigger);

const MyComponent = () => {
  // アニメーションを実行する要素の参照を取得
  const elementRef = useRef(null);

  useEffect(() => {
    // アニメーションを定義
    const timeline = gsap.timeline({
      scrollTrigger: {
        trigger: elementRef.current, // アニメーションを実行する要素
        start: 'top 80%', // スクロールの開始位置
        end: 'bottom 50%', // スクロールの終了位置
        toggleActions: 'play none none none' // アニメーションを実行するタイミング
      }
    });

    // 要素をフェードインさせるアニメーションを追加
    timeline.from(elementRef.current, { opacity: 0, duration: 1 });
  }, []);

  return (
    <div>
      <h1>My Heading</h1>
      <p ref={elementRef}>This element will fade in as you scroll.</p>
      <p>More content...</p>
    </div>
  );
};

この例では、ScrollTriggerを使用して、p要素をスクロールイベントでフェードインさせています。scrollTriggerオブジェクトを定義して、startとendプロパティでスクロールの範囲を設定し、toggleActionsプロパティでアニメーションのタイミングを指定します。fromメソッドで、opacityプロパティを0から1に変化させるアニメーションを実行します。useEffectフックで、コンポーネントがマウントされた時にアニメーションを実行するように設定しています。

プラグインを設定し、詳細を記載する。useRef()を発火させたい要素に設定する
これだけでスクロール感知ができるみたいで非常に簡単だと感じました。
次に疑問となるのが、スクロール感知させたい要素が複数あった場合どうするのか？について質問しました。

スクロールイベントを行いたいコンポーネントが複数存在する場合にはどうするのがベストプラクティスか教えて

複数のコンポーネントでスクロールイベントを実行する場合、各コンポーネントで独立したScrollTriggerを作成することが一般的です。各コンポーネントで異なるアニメーションを実行する必要がある場合には、それぞれのコンポーネントに対して個別にアニメーションを定義することができます。
以下は、複数のコンポーネントに対してScrollTriggerを作成する例です。

import { useEffect } from "react";
import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

const Component1 = () => {
  useEffect(() => {
    const tl = gsap.timeline({
      scrollTrigger: {
        trigger: ".component1",
        start: "top center",
        end: "bottom center",
        scrub: true,
      },
    });

    tl.to(".component1", { opacity: 0, duration: 1 });
  }, []);

  return <div className="component1">Component1</div>;
};

const Component2 = () => {
  useEffect(() => {
    const tl = gsap.timeline({
      scrollTrigger: {
        trigger: ".component2",
        start: "top center",
        end: "bottom center",
        scrub: true,
      },
    });

    tl.to(".component2", { y: -100, duration: 1 });
  }, []);

  return <div className="component2">Component2</div>;
};

const App = () => {
  return (
    <div>
      <Component1 />
      <Component2 />
    </div>
  );
};

export default App;

この例では、Component1とComponent2の両方にScrollTriggerを作成し、それぞれ異なるアニメーションを実行しています。各コンポーネントで異なるトリガー、開始/終了位置、アニメーションを定義することができます。

ReactとGSAPの使い方がわかるようになりました。ありがとうね

どういたしまして。お役に立てて嬉しいです。何か質問があればいつでもお聞きください。

このような感じでReact + GSAPの親和性(コンポーネント単位)が非常に高く
かつ導入コストもそこまで高くない(Vanillaで多少触っている場合)と感じたので
Chat-GPTと切磋琢磨してポートフォリオ作成に取り掛かろうと思います。

以上、「React + GSAPの使い方についてChat-GPTに尋ねてみた」でした。