WebアニメーションをGSAPでつくろう｜基本の動き

WebサイトアニメーションライブラリGSAP(ジーサップ)の基本の動きの解説です。

以前の記事で紹介した基本の動きについての詳細、覚えておきたいこと、実装例を載せています。

GSAPのコードの見方、他

• Tween … 1個の動き（移動・回転・拡大・フェード）
• Timeline … 複数の動きを時間軸でつなぐ
• stagger（スタッガー） … 複数要素を少しずつ時間差で動かす（カードがパラパラ順番に出る）
• イージング … 動きの緩急（バウンド・弾力・カスタム曲線）

上記内容の機能についての説明記事です。

なんとなくAIに「GSAPでアニメーション作って」と言ってもコードを読んで修正できるようにしていきましょう！

ただ、前提としてCSSのプロパティを知っているとより理解できます。

本記事はGSAPチートシートを参考に噛み砕いて解説しています。

GSAPコードの見方｜どこから何を見る？

GSAPのコードには決まり事があります。ベースの考え方はjavascriptと同じで、要素を指定して、それをどう動かすか？どのタイミング動かすか？を指定します。

最初に、コードのどこを見るべきかを解説です。

以下のコードがあるとします。あまり深く考えずに見てください。見るべきポイントは3つです。

const tl = gsap.timeline();

tl.from(".title", {
    y: 30,
    opacity: 0,
    duration: 1
  })
  .to(".box", {
    x: 200,
    rotation: 360,
    duration: 1.5
  })
  .to(".box", {
    backgroundColor: "#ff0055",
    duration: 0.5
  });

画像の箇所を主に見ていきます。

次に.to .fromなどの解説です。よく使うもので4種類あり以下のような書き方をされます。

• .to()
• .from()
• .fromTo()
• .set()

fromToの大文字に気をつけてください。小文字にしてしまうとエラーで動かなくなります。

gsap.to()

今の状態(CSSで指定した、静的な状態)から、gsapで書いた状態へ移行します。

一番よく使う、「最終的にこうなってほしい」の内容です。

gsap.to(".box", { x: 200, duration: 1 });
// 今の位置 → 右に200px動く

gsap.from()

toの逆で、gsapで書いた状態から、CSSで指定した静的な状態に持っていきたい時に書きます。

gsap.from(".box", { y: 60, opacity: 0, duration: 1 });
// 「60px下・透明」から → 本来の位置・表示へ（=ふわっと登場）

gsap.fromTo()

開始も終了も自分で指定したい時。最初から最後まで動きをgsapで指定します。

指定したCSSはgsapが上書きします。動きだけの管理をgsapで指定するとわかりやすいですね。

gsap.fromTo(".box",
  { opacity: 0, scale: 0.5 },   // 開始
  { opacity: 1, scale: 1, duration: 1 }  // 終了
);

gsat.set()

最初の状態を決めておくメソッドです。.fromも最初の状態を指定しておくメソッドですが、こちらは動かず、指定した状態をキープします。

動かすのは別の指定を行いアニメーションを発火させます。.toとの組み合わせで、クリックしたら動く、などの時に使用します。

gsap.set(".box", { opacity: 0 });
// アニメせず、いきなり透明にする（準備用）

よく使うプロパティ・メソッド・オブジェクト

{}の中に足していく、どんな動きをしてほしいかの指定をする時に使います。

タイムライン

GSAPで特に使うことの多いであろう機能です。

gsap.timeline()というメソッドを使ってアニメーションを順番に発火させます。

例えば以下のような時。timeline()で囲んだ.toメソッドが順番にチェーンして発火していきます。

gsap.timeline()
  .to(".box", { x: 100 })
  .to(".box", { y: 100 })
  .to(".box", { opacity: 0 });

gsap.timelineとそのまま使うことは稀で、ほとんどの場合は変数に格納して使用します。

const tl = gsap.timeline()

tl.to()といった具合ですね。

タイムラインを使わずに.toを並べると、同時に動いてしまいます。

タイムラインの細かい使い方はこちらの記事から→執筆中

stagger（スタッガー）

stagger（スタッガー）は、複数の要素をまとめて動かすときに時間差をつけるオプションです。

たとえばカードを10枚いっぺんに出すと、全部が同時に現れて少し味気ないんですよね。そこでstaggerを使うと、1枚ずつ少しずつズラして「パラパラッ」と順番に登場させられます。

ありがたいのが、1個ずつdelayを書かなくていいこと。gsap.from()にstagger: 0.1と1行足すだけで、GSAPが勝手に間隔を空けて順番に動かしてくれます。

gsap.from(".card", {
  y: 30,
  opacity: 0,
  duration: 0.6,
  stagger: 0.1   // 0.1秒ずつズラして順番に
});

「どこから始めるか」も指定できる

staggerをオブジェクトで書くと、もう一歩細かく制御できます。

gsap.from(".card", {
  y: 30,
  opacity: 0,
  stagger: {
    each: 0.1,        // 1個ごとの間隔
    from: "center"    // 中央から外側へ広がる
  }
});

シンプルなスタートを使って端から出すも良し、ランダムに出して遊び心をもたせるも良し。

様々な使い方が出来ますね。

イージングeasing

easeでアニメーションの動きを指定します。GSAPのデフォルトはpower1.outというもの。

公式サイトで動きを確認できます。| GSAP Ease Visualizer

ただまぁ英語ばっかりでやこしいので、以下のイメージです。

まとめ

当記事では、GSAPの基本的な動きとコードの見方、よく使うプロパティを紹介してきました。

ざっくり振り返ると、次の内容です。

• コードの見方（誰を・どう・いつ動かすか）
• 動きの4メソッド（.to / .from / .fromTo / .set）
• よく使うプロパティ（duration・ease・repeat など）
• Timeline（動きを順番につなぐ）
• stagger（複数要素を時間差で動かす）
• イージング（動きの緩急）

最初は呪文のように見えるGSAPも、「要素を指定して、どう動かすか・いつ動かすか」のポイントさえ押さえれば、コードの意味が読めるようになってきます。

実装そのものは、AIに頼めばあっという間に出してくれる時代です。だからこそ、出てきたコードを読んで、細かい指示や修正を自分で行えることが大事になります。

今回の内容を押さえておけば、AIが書いたGSAPコードを見ても「ここを直せばいいな」と判断できるはずです。

より複雑な動きや、スクロールに連動したアニメーションは、別の記事で詳しく解説していきます。まずは今回の基本をさわって、GSAPに少しずつ慣れていきましょう。

最後までご覧いただき、ありがとうございました！