導入
GSAPの実装するための導入方法は大きくふたつあり、
・CDNで読み込む
・公式サイトからライブラリをダウンロードし自サーバーに設置する
かになります。
CDNで読み込むのが一行コードを追加するだけなのでまずは簡単に始められます。下記コードをhead内もしくはbody最下部に記述します。
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>基本機能
GSAPには様々な機能がありますが、
代表的なものはgsap.to()などのメソッドを使うTween機能です。
単純なアニメーションの場合下記のように記述します。
gsap.to(".sample", {rotation: 45, x: 100, duration: 1});.sampleというクラス名の要素が、45度回転しながら、x方向に100px、1秒間かけて移動するアニメーションになります。
一般的なメソッドは3種類あり、
gsap.to()・・・アニメーション終了時の値を指定
gsap.from()・・・アニメーション開始時の値を指定
gsap.fromTo()・・・アニメーション開始時と終了時の値を指定
//gsap.to()・・・アニメーション終了時の値を指定
gsap.to(".sample", {rotation: 45, x: 100, duration: 1});
//gsap.from()・・・アニメーション開始時の値を指定
gsap.from(".sample", {opacity: 0, x: 100, duration: 1});
//gsap.fromTo()・・・アニメーション開始時と終了時の値を指定
gsap.fromTo(".sample", {opacity: 0}, {opacity: 0.5, duration: 1});のように記述します。
主なプロパティ
x: x軸方向への移動量
y: y軸方向への移動量
repeat: アニメーションのリピート回数
delay: アニメーションが開始するまでの時間
duration: アニメーションの長さ
ease: アニメーションの変化率
onUpdate: アニメーションがアップデートされる際に呼び出される関数
onComplete: アニメーション終了した際に呼び出される関数参考：https://greensock.com/docs/v3/Installation
http://mtrad-blog.com/2021/09/21/post-2488/
https://note.com/shift_tech/n/n6f11974bff71
