当ブログでも過去記事で紹介しているアニメーションや動きのある機能を実装する際に便利なプラグインのGSAPですが、最近ではReactをつかったプロジェクトでコンポーネント内でも扱うことが増えてきました。静的なHTMLコーディングの時と少し異なる点などもあったので、備忘録として残しておきたいと思います。   （過去の参考記事もどうぞ） GSAPとvivusを使ったSVGのドローアニメーション GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用 GSAPでScrollTriggerプラグインを使ってスクロールに対応したアニメーションを実装してみる＃3：スクロールで固定表示 GSAPでScrollTriggerプラグインを使ってスクロールに対応したアニメーションを実装してみる＃2：スクロール量に連動 GSAPでScrollTriggerプラグインを使ってスクロールに対応したアニメーションを実装してみる＃1：基本編 JavaScriptのアニメーションライブラリ「GSAP」を使ってみる   React（JSX・TSX）でGSAPを扱うときも基本的には同じなのですが、アニメーションさせる要素やトリガー要素などはDOMを直接参照するのではなく、useRefを使うことがポイントになります。下記はテキスト要素の表示非表示をボタンクリックで切り替えるトグル機能の例となります。まずは通常通り必要な要素をコンポーネントとして作成し、GSAPのモジュールをインポートします。そして、アニメーションの対象要素を「useRef」をつかって参照します。また、ここではuseStateでリスト要素表示の状態を管理するための変数も用意しておきます。

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

export default function App() {
  const ref = useRef<HTMLHeadingElement>(null);
  const [isActive, setIsActive] = useState(true);
  const playForward = () => {
    gsap.fromTo(
      ref.current,
      { y: 50, autoAlpha: 0, },
      { y: 0, autoAlpha: 1, }
    );
  };
  const playReverse = () => {
    gsap.fromTo(
      ref.current,
      { y: 0, autoAlpha: 1, },
      { y: -50, autoAlpha: 0, }
    );
  };
  useEffect(() => {
    if (isActive) {
      playForward();
    } else {
      playReverse();
    }
  }, [isActive]);
  return (
    <>
      <h1 ref={ref}>テキスト</h1>
      <button type="button" onClick={() => setIsActive(!isActive)}>トグルボタン</button>
    </>
  );
}

  あとは、GSAPのメソッドでアニメーション部分の処理を作成し、ステートの変数が更新されたタイミングで表示もしくは非表示の処理が分岐されるよう「useEffect」の中で実行します。最後はボタンクリックでステートの値を切り替わるようにすると完成です。上記はクリックイベントで値を切り替えることでアニメーション処理が行われるため間接的にDOMの要素を参照している形になりますが、読み込んだタイミングで要素に対してアニメーションを実行させる場合でもuseEffectを使って、コンポーネントが初期化された後に実行させるようにしておきます。   上記は単一の要素に対してのアニメーション処理ですが、複数の要素に対して同時にアニメーション処理を行うケースもみていきます。ここでは複数のリスト項目要素に対して時間差で動かしていくシーケンシャルなアニメーションをさせる例になります。先ほど同様に、useRefを使ってDOMを参照していくのですが、複数要素の場合にはそれぞれ個別に参照するため「createRef」をループの中で使っていきます。こうすることでHTML側でそれぞれ個別の要素として参照できるようになり、その個別要素ことにGSAPの処理を当てていく必要があります。

import { createRef, useRef, useEffect, RefObject, useState } from "react";
import gsap from "gsap";

export default function App() {
  const listItems = ["menu 1", "menu 2", "menu 3", "menu 4", "menu 5"];
  const refs = useRef<RefObject<HTMLLIElement>[]>([]);
  const [isActive, setIsActive] = useState(true);
  listItems.forEach((_, index) => {
    refs.current[index] = createRef<HTMLLIElement>();
  });
  const playForward = () => {
    refs.current.forEach((item, index) => {
      gsap.fromTo(
        item.current,
        { y: 50, autoAlpha: 0, },
        { y: 0, autoAlpha: 1, delay: index * 0.1, ease: "power1.out", }
      );
    });
  };
  const playReverse = () => {
    refs.current.forEach((item, index) => {
      gsap.fromTo(
        item.current,
        { y: 0, autoAlpha: 1, },
        { y: -50, autoAlpha: 0, delay: index * 0.1, ease: "power1.out", }
      );
    });
  };
  useEffect(() => {
    if (isActive) {
      playForward();
    } else {
      playReverse();
    }
  }, [isActive]);
  return (
    <>
      <ul>
        {listItems.map((item, index) => (
          <li key={index} ref={refs.current[index]}>
            {item}
          </li>
        ))}
      </ul>
      <button type="button" onClick={() => setIsActive(!isActive)}>トグルボタン</button>
    </>
  );
}

  静的コーディングの場合ですと、GSAP側で「.utils.toArray()」などの便利なメソッドがありますが、それらが使えないため、このような形で対応していきます。実際に作成したデモはこちらにありますので、是非チェックしてみてください。  

---

  今回はReactでGSAPを使うパターンについて注意点などもあわせて見ていきました。動的なウェブサイトでは扱うことも多いですし、動きをつける際にはやはりGSAPが第一の選択肢となるケースも多いのではないでしょうか。是非覚えておきたいですね。