JavaScriptのアニメーションライブラリGSAPについて

GSAPとは

GSAPとはGreensockが提供しているJavaScriptのアニメーションライブラリです。
軽量かつ多機能でスクロールに応じたアニメーションや複雑なアニメーションが簡単に実装できます。

GSAPの導入方法

GSAPの導入は簡単で主にCDN（scriptタグを貼り付ける方法）と、NPM（パッケージマネージャーを使う方法）を使う方法があります。

//CDNの場合
https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js

//NPMの場合
npm install gsap

GSAPの基本的な使い方

第1引数にアニメーションをさせたいセレクターを指定します。
第2引数にはどのようにアニメーションさせたいかを指定します。

gsap.to('idやclass',{
  //どう動かすか
  x: 200, //x方向に移動
  repeat: 3, //3回繰り返す
  duration: 5 //アニメーションに5秒かける
});

主なプロパティ

x: x軸方向への移動量
y: y軸方向への移動量
duration: 時間
ease: 加減速
delay: 遅延秒数
repeat: リピート回数
repeatDelay リピートするまでの遅延時間
yoyo リピート時に反復挙動にするか
paused 一時停止した状態にするか

ざっくりした内容にはなりましたが、タイムラインやプラグインを使用することで、もっと複雑なアニメーションなどを簡単に実装にすることもできるので、他の指定方法や詳しく知りたい人は是非公式サイトを参考にしてみてください。

公式サイト