【GSAP】GSAPの実装(導入と基本機能)

導入

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

関連記事

コメントを残す

*