Next.js×React(App Router)でGSAPを扱う
fromTo をコンポーネント内で扱う例。
useEffectで使えば、サイトに訪れたときにアニメーションが走る。
code: Component.tsx
import { useEffect } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
export function Component() {
// レンダリング結果が反映された後に実行される
useEffect(() => {
// 実行が早いとGSAPから要素がないと怒られるので分岐
if (document.getElementById('comment')) {
gsap.fromTo(
'#comment',
{
// ~初期状態~
},
{
// ~遷移後~
scrollTrigger: {
// ~スクロールトリガー~
},
}
);
}
}, []);
return (
<>
<div id="comment">~何らかの要素~</div>
</>
);
}
useEffectの第2引数の指定によって、実行するタイミングが変わってくるみたい。
useEffect(() => {}); 何も指定しない → レンダリング毎に実行される
useEffect(() => {}, []); 最初のレンダリングのみ実行
useEffect(() => {}, [setList]); 最初のレンダリングとsetListの更新時に更新される。