GSAP入門(第3回) - ScrollTrigger・MotionPath・FLIP・テキストモーション

GSAPジーサップ入門の第3回では、強力なプラグインを紹介します。

スクロール制御

スクロールと連動して制御するにはGSAPのプラグイン「ScrollTriggerスクロール・トリガー」を利用します。ScrollTriggerはGSAPの目玉機能でもあり、クリエイティブ系のウェブサイトで頻繁に利用されています。

次のサンプルで、下部方向にスクロールしてみてください。ビューポートにはいってきたときに、段落が流れるように出現します。

ScrollTriggerを使えば、要素がビューポートに入ってきたら再生する、といった演出を手軽に作れます。ビューポートに入ってきたら何か処理をするなら『Intersectionインターセクション Observerオブザーバー』を想像されると思いますが、ScrollTriggerだともっと複雑なことも制御できます。

ScrollTriggerでできること

発火タイミングの指定
再発火のルールの指定（再生後にもう一度再生するか等）
スクロール中に要素を固定するかの指定
スクロール量とアニメーション進捗の連動（スクラブ）

スクロールトリガーの使い方

シンプルな実装例は以下の通りです。

scriptタグで取り込む場合はCDNからプラグインを読み込みます。

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

npmの場合は『GreenSock | Docs | Installation』を参考ください。

JavaScriptではgsap.registerPlugin()メソッドでプラグインを登録します。プラグイン登録はJavaScriptの実行時に1回だけでよいので、何度もgsap.registerPlugin()を呼び出さないようにしましょう。

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

使いたい箇所で、scrollTriggerプロパティーを指定します。

// 演出対象となる要素を取得
gsap.utils.toArray("section").forEach((el) => {
  gsap.from(el, {
    x: 128,
    opacity: 0,
    duration: 1.5,
    ease: "power4.out",
    // スクロールトリガーの設定
    scrollTrigger: {
      trigger: el, // 対象物
    },
  });
});

実行結果は以下の通りです（先述のデモよりも演出をシンプルにして、コードを短くしています）。

ScrollTriggerの詳しい解説は当サイトの記事『トレンドウェブサイトから学べ！　JavaScriptで作る本格スクロール演出』を参照ください。

コラム： CSSのスクロール駆動アニメーションとは何が違うか

Chrome・Edge・Safariには「スクロール駆動アニメーション（Scroll-driven Animations）」という機能があります。

CSSだけでスクロールアニメーションが作れる！？新技術Scroll-driven Animationsとは - ICS MEDIA

スクロール駆動アニメーションは、JavaScriptライブラリを使わずにCSSだけでスクロールアニメーションを作れます。GSAPのScrollTriggerは、ピン留めやスナップ、コールバック等をJavaScriptで組み合わせて制御できる点が異なります。

曲線上に動かす

曲線を扱うようなトゥイーンにはGSAPのプラグイン「MotionPathPluginモーション・パス・プラグイン」を利用します。

SVGのパスにそって移動させられます。パスにそって回転している点が見どころです。

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

gsap.to("#rect", {
  duration: 3,
  ease: "power4.inOut",
  // パスを指定
  motionPath: {
    // SVGのパスに沿って移動
    path: "#path",
    align: "#path",
    autoRotate: true,
    alignOrigin: [0.5, 0.5],
  },
});

任意のパラメーターに対してもカーブのきいたトゥイーンを作成できます。個人的には先述のSVGのパスより、この目的でMotionPathPluginをよく使います。XY座標だけでなく、さまざまなプロパティーに対してカーブをつけられることがポイントです。

// プラグインを登録
gsap.registerPlugin(MotionPathPlugin);
// （抜粋）
// 一緒くたに移動
const list = gsap.utils.toArray(".rect");
list.forEach((rect, index) => {
  gsap.fromTo(
    rect,
    {
      x: "-40vw",
      scale: 0.0,
    },
    {
      duration: 2 + Math.random() * 3,
      repeat: -1,
      ease: "power1.inOut",
      x: "40vw",
      motionPath: [
        { y: (Math.random() - 0.5) * 20 + "vh", scale: 1 },
        { y: (Math.random() - 0.5) * 50 + "vh", scale: 0 },
      ],
      delay: Math.random(),
    },
  );
});

モーションパスプラグインの導入方法

MotionPathはプラグインの登録が必要です。CDNの場合は次のように記述します。

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

npmの場合は、gsap本体に含まれていますが、ES Modulesのimport文に注意ください。Install Helperを参考にするといいでしょう。

FLIPプラグイン

FLIPは「First、Last、Invert、Play」の頭文字を取った、レイアウト変更の前後を滑らかにつなぐ手法です。GSAPのFlipプラグインでは、変更前の位置や大きさをFlip.getState()メソッドで記録し、DOMやCSSを変更したあとにFlip.from()メソッドでアニメーションできます。

詳しくは記事『JavaScriptで実現するFLIPアニメーションの原理と基礎』を参照ください。

テキストモーション

GSAPにはテキストモーションに特化したプラグインも用意されています。ここでは3種類のプラグインを紹介します。

※一部のプラグインはもともと有償でしたが、現在のGSAPでは無償で利用できます。

TextPluginで1文字ずつ表示する

TextPluginは、DOM要素のテキストを徐々に置き換えます。空の要素を対象にすると、1文字ずつ入力するように表示できます。

gsap.registerPlugin(TextPlugin);

gsap.to(".demo", {
  duration: 1,
  text: "テキストが一文字ずつ表示されます",
  ease: "none",
});

SplitTextで文字・行ごとに動かす

SplitTextは、テキストを文字・単語・行の単位に分解します。次の作例では各文字にマスクを適用し、yPercentとstaggerで左から順に表示します。

gsap.registerPlugin(SplitText);

const split = SplitText.create(".demo", {
  mask: "chars",
});

gsap.from(split.chars, {
  yPercent: 100,
  duration: 0.75,
  ease: "power4.out",
  stagger: 0.04,
});

行単位の場合はtype: "lines"とmask: "lines"を指定し、split.linesを動かします。

const split = SplitText.create(".demo", {
  type: "lines",
  mask: "lines",
});

gsap.from(split.lines, {
  yPercent: 100,
  duration: 1,
  ease: "power4.out",
  stagger: 0.2,
});

SplitTextとScrollTriggerを組み合わせる

SplitTextはScrollTriggerと組み合わせることもできます。次の作例では、各テキストが画面内に入ったタイミングで、文字単位のモーションを再生します。

ScrambleTextPluginで文字をスクランブル表示する

ScrambleTextPluginは、ランダムな文字から本来の文字列を徐々に表示します。scrambleText: "{original}"では、要素の元のテキストへ収束します。

gsap.registerPlugin(ScrambleTextPlugin);

gsap.to(".demo", {
  duration: 1,
  scrambleText: "{original}",
});

まとめ

GSAPのプラグインは、魅力的な演出を少ないコードで実現できる点で魅力的です。プラグインを使うと、演出のアイデアまで広がるのがおもしろいと感じます。

続く第4回では、トゥイーンの高度な制御やユーティリティー関数などを解説します。

※この記事が公開されたのは3年前ですが、今月8月に内容をメンテナンスしています。

ICS MEDIA