🦴

【JS】gsapの基本的な使い方（tween編）

2024/06/04に公開

JavaScript

tech

gsapとは？

gsap(ジーサップ)は、JavaScriptのライブラリで、アニメーションづくりに使います。
シンプルでわかりやすく、カスタマイズがしやすいことが特徴です。

導入方法

①CDNを使用したインストール方法
HTMLファイルの<head>内に下記のコードを追記します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>

②NPMでインストール
Node.jsの開発環境で利用するには、npm installコマンドでgsapパッケージをインストールします。

npm install gsap

GSAPのTween構文

tweenの基本構文は、以下です。
gsap.メソッド(ターゲット, パラメータ);
メソッドでアニメーションのタイプを選んで、ターゲットでアニメーションさせたい要素を選びます。その次にパラメータを指定します。順番に見ていきます。

メソッド

4つのメソッドがあります
gsap.to()
ターゲットを、現在の状態→指定した状態へアニメーションさせます。
gsap.from()
ターゲットを、指定した状態→現在の状態へアニメーションさせますgsap.to()の逆です。
gsap.fromTo()
開始時と終了時の状態を両方とも指定できます。toメソッドとfromメソッドを合わせたようなものです。
gsap.set()
ターゲットを、アニメーションなしで瞬時に指定した状態に変化させます。

？？ちょっと疑問？？
gsap.to()でduration設定しなかったら、gsap.set()と同じじゃないの...？
gsap.set()使う場面ないんじゃない？

gsap.to('#box', {
 x: 200, // x座標を200pxに移動する
 y: 100, // y座標を100pxに移動する
});

上記のように書いてみたらとても速く移動しました。調べてみたところ、デフォルトでdurationが0.5秒で設定されていました。
アニメーションが必要な時はgsap.to()、アニメーションなく変化させたい時はgsap.set()を使いましょう！

ターゲット

第一引数でターゲットとなる要素を指定する。

// classやIDで指定
gsap.to(".class", {x:100});
gsap.to("#id", {x:100});
// セレクタを使用
gsap.to("li", {x:100});
// 変数で指定
const elm = document.querySelector(".class");
gsap.to(elm, {x:100});

gsap.to(".class", {x:100});
こうかくだけで、".class"部分はdocument.querySelectorAll(".class");を書いたのと同じになる！

？？ちょっと疑問？？
classかつmoveを持つ要素という指定はできるのかな？

gsap.to(".class.move", {x:100});

繋げて書いたらOK！簡単に書ける！

プロパティ

第二引数でCSSプロパティと値を指定する。
transform: translateX(100px)だと、
x: 100という書き方ができる。

gsap.to(".class", {
  x: 100,
  duration: 1,
  opacity: 1,
});
// 変数に入れて渡してもOK
const args = {
  duration: 1,
  x: 100,
  opacity: 1,
}
gsap.to(".class", args);

使ってみた

まとめ

基本的な使い方をまとめました。tween単体で使うことはあまりなくて、
TimelineやScrollTriggerを組み合わせて使うようです。そちらの使い方も勉強したいと思います。