フロントエンドから始めるアニメーション最強のライブラリGSAPを手に入れよう

フロントエンドから始めるアニメーション
最強のライブラリGSAPを手に入れよう

2025年5月1日メンテナンス済み / 株式会社 ICS

ウェブサイトでは、3D演出からUIのマイクロインタラクションまで、さまざまな規模のアニメーションが使われています。実装に用いる技術もCSS、SVG、HTML Canvasなど多様です。

アニメーションが複雑になるほど、コードの記述や時間の管理は難しくなります。JavaScriptのアニメーションライブラリを使うと、複数の動きを整理しながら実装できます。本記事では、アニメーションライブラリのGSAPについて紹介します。

本記事で扱う内容は次のとおりです。

ウェブにおけるアニメーションの役割
アニメーションライブラリを使う理由
GSAPの特徴と基本的な使い方

なぜアニメーションが必要か

ウェブサイトのアニメーションには、主に次の役割があります。

演出によってウェブサイトの雰囲気を伝える
ユーザーの視線を誘導する

動きの速さや軌道は、ウェブサイトの印象に影響します。また、複数の要素を順番に動かすと、情報を見る順序を示せます。次の動画では、アニメーションによって視線を誘導しています。

ICS MEDIAでもアニメーションに関する記事を公開しています。

なぜアニメーションライブラリを使うか

単純な動きであれば、CSS TransitionsやCSS Animationsでも実装できます。JavaScriptのアニメーションライブラリは、次のような場面で役立ちます。

1. インタラクティブなアニメーションを実現するため

クリックやスクロールなどの操作に応じて、アニメーションの再生や停止を制御できます。

2. 複雑なアニメーションを書きやすくするため

対象となる要素や動きが多い場合でも、開始時刻や前後関係をまとめて管理できます。

3. プラグインやユーティリティー関数で機能を拡張するため

ライブラリが提供するプラグインやユーティリティー関数を利用すると、スクロールやドラッグと連動した表現などを実装できます。

GSAPとは

GSAP（GreenSock Animation Platform）は、HTML要素の位置や大きさ、透明度などをJavaScriptからなめらかに変化させるアニメーションライブラリです。複数の要素を順番に動かしたり、いくつもの動きを連続して再生したりできます。

現在はWebflowが提供しており、すべてのプラグインを無料で利用できます。

アニメーションの実装

GSAPを用いてアニメーションを作成します。2つのデモを通じて次の内容を確認します。

シンプルなアニメーションの実装
Timelineを用いた連続的なアニメーション
ScrollTriggerを例としたプラグインの使い方

最初に、次のデモを使って基本的な書き方を説明します。

デモのアニメーションは次の要素に分けられます。

ヘッダー：クリックすると四角形になり、色と位置が変化する
タイトル：ヘッダーのクリック後に表示される
画像：ヘッダーのクリック後、順番に表示される

実装するアニメーションの説明

GSAPの記法を確認しながら実装します。

ヘッダーのアニメーション

const tween = gsap.to("header", {
  duration: 0.5, // アニメーションの時間
  paused: true, // 自動で再生しない
  ease: "power2.out", // イージング
  // アニメーションの終点
  top: 0,
  // ----省略----
});

document.querySelector("header")?.addEventListener("click", () => {
  tween.play();
});

<header>
  <h1>title</h1>
</header>

header {
  /* アニメーション前のスタイル */
}

gsap.to()メソッドの第1引数に対象を、第2引数にアニメーション終了時の値を指定します。生成されるインスタンスはTweenと呼ばれます。

この例ではpaused: trueを指定し、クリック時にtween.play()メソッドで再生しています。主な設定項目は次のとおりです。

duration：アニメーションの時間
delay：再生までの待ち時間
ease：イージング

GSAPには多くのイージングが用意されています。Ease Visualizerでは、実際の動きを見ながら確認できます。

Ease Visualizer

複数の要素のアニメーション

画像を順番に表示する部分を実装します。

staggerの説明

<div class="img-container">
  <img src="https://picsum.photos/seed/1/200/300" alt="" />
  <img src="https://picsum.photos/seed/2/200/300" alt="" />
  <img src="https://picsum.photos/seed/3/200/300" alt="" />
</div>

GSAPではstaggerプロパティーを使い、複数の要素の開始時刻をずらせます。

// img要素をまとめてアニメーションさせる
gsap.to(".img-container img", {
  opacity: 1,
  delay: 1,
  duration: 1.5,
  y: -10, // 少し上に移動させる
  ease: "power2.out",
  // 複数要素を扱うプロパティー
  stagger: {
    from: "start", // 左側から
    amount: 0.8, // 全体で0.8秒の時間差
  },
});

from: "start"は先頭の要素から順番に開始する指定です。amount: 0.8は、最初と最後の要素の開始時刻の差を合計0.8秒にします。

Timelineによる連続したアニメーション

次のデモでは、2つの四角形を順番に動かします。

ローディングアニメーション

複数のTweenに個別のdelayを指定すると、前のアニメーションを変更するたびに後続の開始時刻も調整する必要があります。

Timelineのメリットの説明

gsap.timeline()メソッドを使うと、複数のTweenを1つの時間軸で管理できます。

// Timelineを作成
const tl = gsap.timeline({
  repeat: -1, // アニメーションの繰り返し回数。-1で無限回
  repeatDelay: 0.3, // ループとループの間の時間
  defaults: { duration: 0.5, ease: "power4.out" }, // Tweenのデフォルト値
});

// アニメーションを実行
tl.from(".box", {
  scale: 0,
})
  .to(".box1", {
    left: 50,
  })
  .to(
    ".box2",
    {
      right: 50,
    },
    "<",
  ) // "<"は「前のアニメーションと同時に再生する」オプション
  .to(".box", {
    scale: 0,
  });

<div class="boxes">
  <div class="box box1"></div>
  <div class="box box2"></div>
</div>

.boxes {
  position: relative;
  width: 100px;
  height: 100px;
}

.box {
  position: absolute;
  width: 50px;
  height: 50px;
  background: limegreen;
}

/* 左上 */
.box1 {
  top: 0;
  left: 0;
}

/* 右下 */
.box2 {
  right: 0;
  bottom: 0;
}

Timelineのto()メソッドやfrom()メソッドは、基本的に記述した順番で実行されます。.box2のTweenに指定した"<"は、直前のTweenと同時に開始することを表します。詳しくはTimelineのドキュメントを参照してください。

プラグインの紹介

GSAPには、ドラッグ操作を実装するDraggableや、パスに沿って要素を動かすMotionPathPluginなどのプラグインがあります。

ScrollTriggerは、スクロール位置に応じてアニメーションを制御するプラグインです。デモでは、スクロール時に画像を表示するために使っています。

ScrollTriggerを使ったデモ

該当部分のソースコードは次のとおりです。

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

// プラグインを登録
gsap.registerPlugin(ScrollTrigger);

gsap
  .timeline({
    defaults: { ease: "power2.out", duration: 1.5 }, // Timelineの共通設定
    scrollTrigger: {
      markers: true, // マーカーを表示するか（開発用）
      trigger: ".content", // 位置判定の基準となる要素
      start: "top 50%", // アニメーションを開始する位置
      end: "bottom 25%", // ScrollTriggerの判定を終了する位置
      toggleActions: "play none none none", // 各タイミングで実行する操作
    },
  })
  .to(".content-text h2", {
    opacity: 1,
    y: -10,
  })
  .to(
    ".content-text p",
    {
      opacity: 1,
      y: -10,
    },
    "-=1",
  )
  .to(
    ".content img",
    {
      opacity: 1,
      x: -10,
    },
    "-=1",
  );