JavaScriptライブラリの「GSAPジーサップ」はウェブサイトのモーション制作に役立ちます。GSAPは高機能であり、実行性能が良好です。

始点と終点の間を補間することでモーションを実現することは「トゥイーン」と呼ばれます（Betweenが語源）。トゥイーンの機能を提供するJSライブラリは多くの種類が存在しますが、その中でもGSAPは評判が高く、機能の多さでは群を抜いています。当サイトの記事『トゥイーンライブラリの比較検証』でも、類似のライブラリに比べて性能が高いことを確認しています。

旧TweenMax時代から数えてGSAP利用歴18年の筆者が、GSAPのおさえておくべき最低限の使い方から、現場で役立つテクニックを紹介します。

▼GSAP公式サイト

GSAP入門は全4回で解説します。第1回となる本記事では、インストール方法、基本的なトゥイーン、transform・イージングの指定、staggerによる時間差再生を中心に説明します。

GSAPでできること

▼スクロール連動演出

• 別タブで再生する
• ソースコードを確認する

▼テキストモーション

• 別タブで再生する
• ソースコードを確認する

▼Three.jsとの連携

Three.jsとgsapの連携デモ。

• 別タブで再生する
• ソースコードを確認する

GSAPの使いどころ

CSS Transitionsなどウェブ標準にも選択肢があるなかで、GSAPのメリットはどのようなところにあるのでしょうか？　筆者は以下のように考えています。

• CSS Transitions/AnimationsやWeb Animations APIより、GSAPのほうが制御の自由度が大きい
• 連続したモーションの管理に、GSAPが役立つ
• HTMLのDOMだけではなく、WebGPU/Canvasの実装でもGSAPが利用できる（※）

※WebGPU/CanvasではプレーンなJSのオブジェクトを使うので、CSS Transitions等を利用できません。

逆にいえば、CSS Transitionsだけで実現できるようなウェブサイトではGSAPを使う必要はありません。また、MUIやAnt Designなど、トランジションやモーションを備えたUIライブラリ・デザインシステムを使う場合、基本的なUI演出のためだけにGSAPを追加する必要はないでしょう。

「演出にこだわりたい」「触って気持ちのいいウェブサイトを目指したい」「型にはまらない動きを作りたい」といったケースでGSAPが役立ちます。

インストール方法

GSAPの導入は簡単です。scriptタグを貼り付ける方法と、パッケージマネージャーを使う方法を紹介します。

scriptタグを貼り付ける方法

CDNでサクッと使いたい方はこちら。CDNからscriptタグで取り込みます。

<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>

導入すると、グローバルであるwindowにgsapオブジェクトが生えるので、JavaScript内でgsapと記述すればどこでも利用できるようになります。CDNからだとgzip圧縮時で28KBなので、容量もコンパクトです。

CDNからESMで導入

CDNでES Modulesとして取りこみたい場合は以下のように記載します（参照：ES Modules入門）。

<script type="importmap">
  {
    "imports": {
      "gsap": "https://cdn.jsdelivr.net/npm/gsap@3.15.0/index.js"
    }
  }
</script>

<script type="module">
import { gsap } from "gsap";

// …実装コードを記載
</script>

NPMで導入

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

npm install gsap

TypeScriptの型定義ファイルもgsapパッケージに同梱されているので、@typesの導入は不要です。ES Modulesで利用する場合は、以下のようにコードを書きます。

import {gsap} from "gsap";

gsap.to(someElement, { x:100 }); // 仮コード

公式サイト『GreenSock | Docs | Installation』ではインストールヘルパーや動画で詳しく解説されています。

基本的な使い方

最低限必要な記述は以下の通りです。

// 第1引数に対象、第2引数に変化させたいプロパティーと設定値を指定
gsap.to(".rect", { x: 200, duration: 2 });

第1引数に対象のセレクターやオブジェクト（配列も可）を指定します。第2引数にオブジェクト型で変化させたいプロパティーと、設定値を指定します。時間はduration（単位は秒）を指定します。

たとえば、背景色を1秒で変えたい場合は以下のように指定します。

// 青色に1秒かけて変化
gsap.to(".target", { backgroundColor: "#0000FF", duration: 1 });

CSSのように文字列で数値を指定可能です。

• 別タブで再生する
• ソースコードを確認する

設定値

第2引数に設定値を含めることで、トゥイーンの挙動をカスタマイズできます。次のコードは遅延実行のdelayや、繰り返し指定のrepeatを含めています。

// 2秒だけ遅らせて再生
gsap.to(".target", { color: "#0000FF", duration: 1, delay: 2 });

// 2回繰り返し
gsap.to(".target", { color: "#0000FF", duration: 1, repeat: 2 });

// 繰り返し時に遅延を含める
gsap.to(".target", {
  color: "#0000FF",
  duration: 1,
  repeat: 2,
  repeatDelay: 1,
});

代表的なプロパティーは以下の表にまとめました。利用頻度列の「★★」のプロパティーを覚えておけば最低限利用できます。代表的なものは、本シリーズで解説します。

リピートの制御

繰り返し再生したい場合は、repeatプロパティーを使います。自然数を指定すると、その回数だけ繰り返します。

無限に繰り返したい場合は、repeat: -1を指定します。繰り返し時に待機時間を設けたい場合は、repeatDelayを指定します。

gsap.to(".target", {
  x: 200,
  duration: 2,
  repeat: -1, // 無限に繰り返し
  repeatDelay: 0.5, // 繰り返し時に0.5秒の待機,
});

yoyoを指定すると、オモチャのヨーヨーのように「行って戻って」のリピートができます。

gsap.to(".target", {
  x: 200,
  duration: 2,
  repeat: -1, // 無限に繰り返し
  repeatDelay: 0.5, // 繰り返し時に0.5秒の待機,
  yoyo: true, // 反転
});

• 別タブで再生する
• ソースコードを確認する

トゥイーンさせる対象

gsap.to()の第1引数には、セレクターだけではなくさまざまなオブジェクトを指定できます。セレクターは、document.querySelectorAll()メソッドとほぼ同じ挙動です。セレクターにCSSクラスを指定すれば、条件に一致する要素がすべてトゥイーンします。

HTMLElementのインスタンスも、配列も、任意のオブジェクトでも指定可能です。

// セレクターに一致するものをすべて動かします。
gsap.to(".item", { x: 100, duration: 1 });

// 配列を指定すると、配列の中の対象物をまとめて動かせます。
gsap.to(["#item1", "#item2"], { x: 100, duration: 1 });

// HTMLElementを直接指定すると、それを対象に動かせます。
const element = document.createElement("div");
element.textContent = "Hello";
document.body.append(element);
gsap.to(element, { x: 100, duration: 1 });

// 任意のオブジェクトも指定できます。
const param = { value: 0 };
gsap.to(param, { value: 100, duration: 1 });

transformの指定

GSAPではCSSのtransformを直感的に記述できます。水平方向にはxで指定できます。これはtransform: translateX(任意)のショートカットです。同様にyもtransform: translateY(任意)のショートカットとして利用可能です。

gsap.to(".target", {
  x: 100, // 水平方向
  y: 100, // 垂直方向
  duration: 1,
});

CSSでは回転させるにはtransform: rotate(180deg)のように指定しますが、GSAPでは直接rotateプロパティーで指定できます。単位未指定だと角度（0〜360度で1回転）となります。弧度法を使いたいときは文字列でrad単位を指定します。

// 一回転（度数法）
gsap.to(".target", { rotate: 360, duration: 1 });

// 一回転（弧度法）
gsap.to(".target", { rotate: `${Math.PI * 2}rad`, duration: 1 });

他にもtransformは以下のように記述できます。

• 別タブで再生する
• ソースコードを確認する

コラム：left・topで指定するよりtransformのほうがなめらか

水平・垂直方向に要素を動かす場合は、leftやtopよりも、xやyを使うのが一般的です。CSSのtransformはレイアウト計算への影響が少なく、小数点の描画も適切で滑らかに表示されます。

イージング指定

イージングの指定はeaseプロパティーを使います。イージングは文字列と関数のどちらかで指定できます。

gsap.to(".target", {x :100, duration: 1, ease : "power4.out"});

関数で指定する場合は以下の通り。ES Modulesの場合はimport文でイージング関数の取り込みが必要です。

import {gsap, Power4} from "gsap";
gsap.to(".target", {x :100, duration: 1, ease: Power4.out});

イージングの強度は、"power1.out"・"power2.out"・"power3.out"・"power4.out"と、レベルで定義されています。イージングの種類quad・cubic・quart・quint等の違いに詳しくない方はpower1〜power4を使い分けるといいでしょう。

▲ Sine、Quad、Cubic、Quart、Quint、Expoの順で曲線の性格が強くなります。詳しくは記事『知っておきたいCSSイージングのお手本』を参考にしてください。

• 別タブで再生する
• ソースコードを確認する

加速・減速の指定は以下の3種類から指定できます。

• in : はじめが最低速で、加速する
• out : はじめが最高速で、減速する
• inOut : はじめはゆっくりで加速し、最後は減速する

公式サイト『GreenSock | Docs | Eases』に強弱を試せるツールがあるので、試してみるといいでしょう。

イージングのカスタマイズ

backとelasticは強度をカスタマイズ可能です。文字列内で丸括弧を使って指定します（関数としても記述できます）。

// 戻ってくる動き
gsap.to(".rect", { duration: 2, ease: "back.out(4)", x: "75vw" });

// ボヨンボヨンという動き
gsap.to(".rect", {
  duration: 2,
  ease: "elastic.out(1.2, 0.2)",
  x: "75vw",
});

• 別タブで再生する
• ソースコードを確認する

イージングのオススメ

筆者としては、イージングは"power4.out"がオススメです。その理由として、初心者にありがちな事例を紹介します。

• 強いイージングを怖れて、弱いイージングを指定。結果的にメリハリのない演出にしあがる
• こちらはpower1.out、あちらはpower4.outと強弱がバラバラの指定になり統一感がなくなる
• expoやcircの違いを認識できておらず、適当な指定となり、統一感がなくなる

下手に不揃いなイージングになるよりは、強めのイージングを指定すれば、演出にメリハリがつき、制作時の迷いの時間を減らせるので制作効率がいいです。もちろん、トゥイーンさせたい対象物の面積や距離・時間によってイージングの種類をチューニングすることはあります。

トゥイーンのさまざまな呼び出し方

いままでgsap.to()を中心に説明してきました。to()はトゥイーン終了後の状態を指定するメソッドですが、他にもさまざまなメソッドがあります。

from()

gsap.from(".target", { x: 100, duration: 1 });

gsap.from()メソッドは、指定した値を始点として、対象の現在値までトゥイーンします。HTMLの静的ウェブサイトだと、デザインカンプどおりにコーディングすることが多いですが、静的に完成したウェブサイトに対して「どれだけずらして演出するか」を指定するときにgsap.from()が役立ちます。

fromTo()

gsap.fromTo(".target", { x: 100 }, { x: 200, duration: 1 });

gsap.fromTo()メソッドは始点と終点を設定します。引数が増えるので手間ですが、始点と終点を明示的に指定することで、安定した挙動になります。第2回のタイムラインや第3回のScrollTriggerを使うときに利用することが多いです。

set()

gsap.set(".target", { x:100 });

gsap.set()メソッドは値を設定できます。トゥイーンさせる必要がなく、CSSやプロパティーの値を即座に適用するときに使います。

バラツキのある動き

staggerスタッガープロパティーを使うと、複数の対象物に遅延を持たせて、パラパラっと表示できます。staggerは「ずらして配置する」といった意味です。

// stagger で出現
gsap.from(".rect", {
  y: 10,
  autoAlpha: 0,
  duration: 1,
  ease: "power4.out",
  stagger: 0.02, // 0.02秒ごとに出現
});

位置と透明度に対してstaggerを使うと、以下の作例のように視線誘導を目的とした演出に利用できます。

• 別タブで再生する
• ソースコードを確認する

大量のオブジェクトを移動させるときにも便利です。staggerプロパティーはオブジェクト型で指定すると、細かい指定ができます。

gsap.to(".rect", {
  y: "100vh",
  duration: 2,
  ease: "bounce.out",
  stagger: {
    each: 0.01, // ばらす間隔（秒）
    from: "random" // ランダムに開始
  },
});

• 別タブで再生する
• ソースコードを確認する

格子状に制御

staggerプロパティーでstagger: { grid: "auto" }を指定すると、要素の配置座標を考慮したうえで起点を設定できます。

// 格子状に適用
gsap.from(".rect", {
  scale: 0,
  duration: 1,
  ease: "power4.out",
  stagger: {
    each: 0.05,
    from: "center", // 中央から
    grid: "auto", // 格子状に開始
    ease: "power4.out", // 間隔に対するイージング
  },
});

• 別タブで再生する
• ソースコードを確認する

まとめ

GSAPは意外と簡単に使えて驚きですよね！ とくにstaggerによるバラツキは、少ないコードで魅力的な演出を作れるので役立ちます。

続く第2回の記事では、複雑な演出制作で欠かせない「タイムライン」を解説します。