GSAPとReactの連携について

2021-08-12

こんにちは！

本日は、アニメーションライブラリ「GSAP」の React 導入について、学習したことをまとめていきたいと思います。

GSAP とは

まず、GSAP についてですが、アニメーションライブラリといえば、どの記事でもおすすめされている、ファーストチョイスなアニメーションライブラリであるといえます。

スクロールトリガーや Flip Plugin など、多くのアニメーションの種類があり、多くのウェブサイトに活用されています。

GSAP を React に導入するには、パッケージマネージャーよりgsapをインストールするところから始まります。「npm i gsap」、「yarn add gsap」何かのコマンドを実行します。

これで導入は完了です。

次は、使いたいアニメーション機能を導入していきします。

スクロールトリガーに関しては、こちらの記事を参考にさせていただきました。

このように、適宜こちらで設定していくのですが、こちらは結構場数をこなさないといけないのかもしれません。

GSAP は扱えるようになるには、まだまだかかりそうですね。。。
長い目でコツコツとやっていくしかないようです。

扱えるようになったら、少しアーティストになれたと実感できるようになるのかもしれません。
まだまだ未熟ですが、今後もフロントエンド中心に学習を継続していきます。