Next.js で GSAP を使いたい

NEXT.JS

Next.js で アニメーションつけたい部分があるので、GSAP を使いたい。
いつの間にか有料メンバー部分のプラグインも完全フリーになっていて、とてもありがたい。

まずは pnpm で gsap と @gsap/react インストールする。
@gsap/react は useGSAP を使うために必要。
useGSAP の方が useEffect より最適化されていて、クリーンナップや再実行制御がより簡単になる。

  • gsap:GSAP本体 すべてのアニメーション機能を提供
  • @gsap/react:React 専用のフックやコンポーネント補助

https://gsap.com/resources/React

ページの先頭へ