GSAPとReactでページ遷移アニメーションを実装した話

はじめに

reactを用いてwebページを作っていたのですが何か物足りない。
そこでアニメーションをつけてリッチに見せようと思いつきました。

GSAPとは

要素をなめらかーに動かせるものです。
wappalyzer(サイトがどの技術を使ってるかを推定できるツール)によると「ペルソナ3リロード」や「負けヒロインが多すぎる」のWebページで採用されているらしいです。
ペルソナ3リロード
負けヒロインが多すぎる

基本的な使い方

gsap.to(".my-element", {
  x: 100,          // x座標方向に100px移動
  duration: 1,     // アニメーションの時間を1秒に設定
  opacity: 0.5     // 不透明度を0.5に設定
});

toで元の位置から記述した情報に遷移してくれます。

useGSAPとは？

useEffectと基本動作は変わりません。
GSAPを使うのに特化したuseEffectといった感じです。

実装の手順

• Contextの作成
• Layout.tsxで全体をラップ
• ここに要素を配置
• gsapを実装

実行される流れ

• ボタンを押されたらパスを指定
• isPageOutをtrueにする
• 依存関係にしてるuseGSAPが発火
• 読み込み前のアニメーションを実行
• isPageOutをfalseにする
• useNavigateでページを切り替える
• isPageInをtrueにする
• 依存関係にしてるuseGSAPが発火
• 読み込み後のアニメーションを実行
• isPageInをfalseにする

Contextはなんでいる？

contextを使うことによって変数をpropsで渡さなくて済みます。
語弊を恐れずにいうとグローバル変数のように使うことができます。

<PageContext.Provider
      value={{
        firstLoad,
        setFirstLoad,
        isPageIn,
        setIsPageIn,
        isPageOut,
        setIsPageOut,
        newPath,
        setNewPath,
      }}
    >
          {children}
 </PageContext.Provider>

これでchildren(小要素)に値やstateを渡すことができる。

値をセット

const handleNext = (path: string) =>
  {
    setNewPath(path);
    setIsPageOut(true);
  };

パスを設置してページを離れる時のアニメーションを実行するためにisPageOutをtureにする。

Gsapによるページ切り替え前のアニメーションとページ切り替え

これによりisPageOutを依存関係に設定してあるuseGSAPが実行される。

  //ページアウトアニメーション
  useGSAP(() => {
    const tl = gsap.timeline();
    if (isPageOut) {
      tl.fromTo(
        block3Ref.current,
        { y: "100%" },
        {
          y: "0%",
          duration: 0.6,
          ease: "power2.in",
          onComplete: () => {
            setIsPageOut(false);
            navigate(newPath);//ページに飛ぶ
            setIsPageIn(true);
          },
        }
      );
      
    }
  }, [isPageOut]);

navigateでページ切り替える
その後isPageInをtrueにし、切り替え後のアニメーションを実行するuseGSAPが発火する。

  useGSAP(() => {
    const tl = gsap.timeline();

    if (isPageIn ) {
      tl.fromTo(
        block3Ref.current,
        { y: "0%" },
        {
          y: "100%",
          duration: 0.6,
          ease: "power2.in",
          onComplete: () => {
            setIsPageIn(false);
          },
        }

    }
  }, [isPageIn]);

終わりに

今回自分なりに作ってみたがこれが最適解かわからないです。
他に便利なライブラリがあるのかもしれないです。
それでも今回はGSAPで作ってみたかったので作成してみました。
もし同じようなことを考えてる方がいて、参考になったら幸いです。
質問、訂正依頼お待ちしております😊