アニメーションを手軽に実現。GSAPの使い方

GSAPはJavaScriptのアニメーションライブラリです。GSAPは制御が容易で、高度なアニメーションを実現できる点が特徴です。本記事では、このGSAPの基本からアニメーションの組み立て方までを解説します。

GSAPとは

GSAPはGreenSock Animation Platformの略で、JavaScriptのアニメーションライブラリです。
以下のような特徴があります：

フレームワーク非依存: Vue.js、React、jQueryなど、様々なフレームワークと併用可能。
多様な要素に対応: CSS、SVG、Canvas、React、Vue、WebGL、色、テキスト、モーションパス、オブジェクトなど。
多彩なイベント: スクロールベースのアニメーションも簡単に実装可能。
レスポンシブ対応: gsap.matchMedia()で画面幅ごとにアニメーションを制御可能。
高パフォーマンス: jQueryによるアニメーションより20倍高速（GSAP公式情報）。
プラグインによる拡張: ScrollTrigger、Flip、Draggable、MorphSVGなど、多様なプラグインが利用可能。

GSAPの基本的な使い方

インストール方法

CDNを使用する場合：

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

npmを使用する場合：

npm install gsap

基本的なアニメーション

以下は、.box要素を1秒かけて360度回転させ、x座標を100px移動させる基本的なアニメーションです。

gsap.to(".box", {rotation: 360, x: 100, duration: 1});

この簡単な例を実装したHTMLファイルは以下のようになります：

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GSAP Simple Animation</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: #3498db;
            margin: 50px;
        }
    </style>
</head>
<body>
    <div class="box"></div>

    <script>
        gsap.to(".box", {rotation: 360, x: 100, duration: 1});
    </script>
</body>
</html>

このコードを実行すると、青い四角形が右に移動しながら1回転します。

タイムラインの利用

複数のアニメーションを連続して、あるいは同時に実行したい場合は、タイムラインを使用します。

const tl = gsap.timeline();

tl.to(".box1", { duration: 2, x: 100 })
  .to(".box2", { duration: 1, y: 200 })
  .to(".box3", { duration: 3, rotation: 360 });

タイムラインを使用すると、アニメーションの順序や開始時間を細かく制御できます：

tl.to(".box1", { duration: 2, x: 100 }) 
  .to(".box2", { duration: 1, y: 200 }, "-=1") // 前のアニメーションが完了する1秒前に開始
  .to(".box3", { duration: 3, rotation: 360 }, 2); // 前のアニメーションが完了して、2秒後に開始

以下は、タイムラインを使用したHTMLの例です：

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GSAP Timeline Animation</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
    <style>
        .box {
            width: 50px;
            height: 50px;
            position: absolute;
            left: 20px;
        }
        .box1 { background-color: #3498db; top: 20px; }
        .box2 { background-color: #e74c3c; top: 80px; }
        .box3 { background-color: #2ecc71; top: 140px; }
    </style>
</head>
<body>
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>

    <script>
        const tl = gsap.timeline();

        tl.to(".box1", { duration: 2, x: 100 })
          .to(".box2", { duration: 1, y: 200 }, "-=1")
          .to(".box3", { duration: 3, rotation: 360 }, 2);
    </script>
</body>
</html>

スクロールトリガー

スクロールに応じてアニメーションを開始したい場合は、ScrollTriggerプラグインを使用します。

gsap.to(".box", {
    scrollTrigger: ".box", // .boxが画面内に入るとアニメーションが開始
    x: 500
});

以下は、スクロールトリガーを使用したHTMLの例です：

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GSAP Scroll Trigger Animation</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 200vh;
        }
        .spacer {
            height: 100vh;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: #3498db;
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <div class="spacer"></div>
    <div class="box"></div>

    <script>
        gsap.registerPlugin(ScrollTrigger);

        gsap.to(".box", {
            scrollTrigger: ".box",
            x: 500,
            duration: 2,
            rotation: 360
        });
    </script>
</body>
</html>

この例では、ページをスクロールして青い四角形が画面に入ると、右に移動しながら回転するアニメーションが開始されます。

より実践的な使い方

GSAPのサイトには、他にも数多くのデモがあります。これらを参考にすれば、より実践的な使い方を学ぶことができます。

Resources | GSAP Demos

以下は、スケートボートをマウスでドラッグできるようにするデモです。

const root = document.documentElement;
const btnWildMode = document.getElementById("wild-mode");

function resetPropertyValues() {
  root.style.setProperty("--x", 0);
  root.style.setProperty("--y", 0);
}

Observer.create({
  preventDefault: true,
  onChangeX({ isDragging, deltaX }) {
    if (!isDragging) return;
    const x = root.style.getPropertyValue("--x");
    root.style.setProperty("--x", parseInt(x) - deltaX);
  },
  onChangeY({ isDragging, deltaY }) {
    if (!isDragging) return;
    const y = root.style.getPropertyValue("--y");
    root.style.setProperty("--y", parseInt(y) + deltaY);
  }
});

btnWildMode.addEventListener("click", () => resetPropertyValues());

resetPropertyValues();

CSSkateboard [w/ GSAP Observer]