初回アクセス時のみLoadingアニメーションさせたい。【Next.js】

実装目的

index.tsx

    return (
        <div className={styles.loader}>
            <div ref={leftRef} className={styles.left} />
            <div ref={rightRef} className={styles.right} />
        </div>
    );

上記箇所でLoadingアニメーションさせています。
表示開始時にファーストビューの視界が中央から左右に向かって広がるというものです。
前回記事：ReactではじめてのGSAP実装【デモサイトあり】
上記の記事にて、左右に向かって広がるアニメーションの実装をしております。

今回の修正前まで、画面遷移のたびにアニメーションが発動して鬱陶しい状態でした。
修正を行い、発動条件を初回アクセス時に限定したときの備忘録をまとめていきます。

デモサイト

デモサイト：架空ホテルのWebサイト

ソースコード

useStateを追加

"use client";
- import { useEffect, useRef } from "react";
+ import { useEffect, useRef, useState } from "react";
import gsap from "gsap";
import styles from "./index.module.css";

export const Loader = () => {

アクセス履歴の状態管理をしたいのでuseStateを追加します。

useStateで状態管理

    const leftRef = useRef<HTMLDivElement>(null);
    const rightRef = useRef<HTMLDivElement>(null);
+   const [isFirstVisit, setIsFirstVisit] = useState(false);

isFirstVisitのstateを追加。
初回アクセス時のみLoadingアニメーションさせたいので、
Stateを使って初回訪問かどうかを管理します。

新規のuseEffectを追加

+    useEffect(() => {
+       const hasVisited = sessionStorage.getItem("hasVisited");
+       if (!hasVisited) {
+           setIsFirstVisit(true);
+           sessionStorage.setItem("hasVisited", "true");
+       }
+   }, []);

アニメーションの動き制御用のuseEffectに加えて、判定用のuseEffectを使用。
「sessionStorageに訪問履歴を保存させる」という機能をhasVisitedに持たせます。

もし訪問履歴が保存されていなかったら
stateでisFirstVisitをtrueにし
sessionStorageでhasVisitedをtrueにする。

sessionStorageとは？

sessionStorage プロパティは読み取り専用で、セッションの Storage オブジェクトにアクセスできます。sessionStorage は Window.localStorage に似ています。唯一の違いは、localStorage に保存されたデータに期限がないのに対して、sessionStorage に保存されたデータはページのセッションが終了するときに消去されることです。

ブラウザで保存される訪問履歴にアクセスできるのが「sessionStorage」とのこと。
似たプロパティにlocalStorageがあります。

セッションが途切れるまでの履歴にアクセスできるのが「sessionStorage」で、無期限に保持される履歴に対してアクセスできるのが「localStorage」です。

あくまで余談ですが、localStorageはブラウザのグローバルオブジェクトである window のプロパティに該当するので、省略せずに書くとWindow.localStorageとなります。

初回訪問時に限定

    useEffect(() => {
        if (isFirstVisit) {
            const tl = gsap.timeline();

            tl.to([leftRef.current, rightRef.current], {
                duration: 1,
                width: "0%",
                ease: "power2.inOut",
                delay: 0.5,
            });
        }
+   }, [isFirstVisit]);

isFirstVisit（初回訪問）であればgsapでのLoadingアニメーションが発動。

+   if (!isFirstVisit) return null;

isFirstVisit（初回訪問）でなければnullを出力。

index.tsx

    return (
        <div className={styles.loader}>
            <div ref={leftRef} className={styles.left} />
            <div ref={rightRef} className={styles.right} />
        </div>
    );
};

出力内容は特に変更なし。Loaderコンポーネントの修正が完了。
初回アクセス時だけLoadingアニメーションが発動されるようになりました。

まとめ

「画面遷移のたびにアニメーションが発動して鬱陶しい状態」を脱するべく、発動条件を初回アクセス時に限定していきました。

GSAP初心者過ぎてLoadingアニメーションしか実装したことがありませんが、今後はGSAPじゃないと表現できないようなアニメーションを使って遊んでみたいと思います。