WEBコーダー3年目。フロントエンドエンジニアになろうと思い、React学習がてらにデモサイトを制作中です。
初めてGSAPを使ったので、そのときの備忘録としてまとめました。
デモサイトについて
初めてのReactでの制作。Next.jsとMicroCMSを使いました。
https://concordia-nextjs.vercel.app/
実装したアニメーション
表示開始時にファーストビューの視界が中央から左右に向かって広がるような
アニメーションにしました。
バージョン
"next": "^14.2.25",
"react": "^18",
"gsap": "^3.12.7",
上記はpackage.jsonの一部を抜粋したバージョン情報です。
index.tsxのソースコード
"use client";
import { useEffect, useRef } from "react";
import gsap from "gsap";
import styles from "./index.module.css";
export const Loader = () => {
const leftRef = useRef<HTMLDivElement>(null);
const rightRef = useRef<HTMLDivElement>(null);
useEffect(() => {
const tl = gsap.timeline();
tl.to([leftRef.current, rightRef.current], {
duration: 1,
width: "0%",
ease: "power2.inOut",
delay: 0.5,
});
}, []);
return (
<div className={styles.loader}>
<div ref={leftRef} className={styles.left} />
<div ref={rightRef} className={styles.right} />
</div>
);
};
上記ソースコードを5箇所に分けて自分なりに説明を加えました。
フックとライブラリ
"use client";
import { useEffect, useRef } from "react";
import gsap from "gsap";
import styles from "./index.module.css";
フックはuseEffectとuseRefを使用。
アニメーション発動タイミングをDOMの準備ができたあとにさせるための「useEffect」、
アニメーションさせるdiv要素を参照するための「useRef」、この2つ。
ライブラリはGSAPを使用。
Loaderコンポーネント
export const Loader = () => {
Loadingアニメーションを実装するためのコンポーネントを作成。
以下にLoaderコンポーネントの中身を書いていきます。
useRefでHTMLのdiv要素を参照
const leftRef = useRef<HTMLDivElement>(null);
const rightRef = useRef<HTMLDivElement>(null);
「ファーストビューの視界が中央から左右に向かって広がる」というアニメーションを実装するので、必要なdiv要素を参照する「leftRef」「rightRef」という変数を定義。
もちろん変数名は任意です。
useEffectとGSAP
useEffect(() => {
const tl = gsap.timeline();
tl.to([leftRef.current, rightRef.current], {
duration: 1,
width: "0%",
ease: "power2.inOut",
delay: 0.5,
});
}, []);
useEffectの第一引数にてGSAPのタイムライン機能gsap.timelineを使用。
https://gsap.com/docs/v3/GSAP/Timeline/
第二引数は空にすることで1度だけアニメーションさせます。
警告
ここでいう「1度だけアニメーションさせる」というのは、gsap.timeline()発動に対して1度だけという意味です。
警告
今回掲載しているソースコードだと、ページ遷移のたびに1度アニメーションされます。
参照される要素を出力
return (
<div className={styles.loader}>
<div ref={leftRef} className={styles.left} />
<div ref={rightRef} className={styles.right} />
</div>
);
};
ここまでがLoaderコンポーネントの中身。
以上がindex.tsxソースコードの説明でした。
index.module.cssのソースコード
使用したcssは以下の通りです。
.loader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
pointer-events: none;
}
.left {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: rgba(var(--color-primary-rgb), 0.96);
}
.right {
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background-color: rgba(var(--color-primary-rgb), 0.96);
}
「position:fixed」でコンポーネント全体を固定化させつつ、「position:absolute」で左右の要素が柔軟に動けるように。
これでGSAPのアニメーション実装完了です。
まとめ
以上がReact.jsでGSAPのアニメーションを実装したときの備忘録です。
今回掲載したソースコードのままだと、ページ遷移のたびにLoadingアニメーションが発動して鬱陶しいので、初回表示時に限定させる実装も行うことに。
その実装については別記事で紹介したいと思います。