GSAP｜アニメーションの途中で任意のクラスを付与する方法まとめ

2023年3月18日

masu

アニメーションの実装に特化したJavaScriptライブラリであるGSAPにおいて、アニメーションの途中でHTMLにクラスを付与する方法をまとめています。

大きく分けて2つのパターンが考えられます。

スクロールアニメーションの途中でクラスを付与
タイムラインのアニメーションの途中でクラスを付与

それぞれについて解説しています。

動作確認環境

GSAP@3.12.2

スクロールアニメーションの途中でクラスを付与する方法

GSAPではスクロールに応じたアニメーションをScrollTriggerを使うことで簡単に実装することができます。この章ではScrollTriggerを使う際に、クラスを付ける方法を紹介しています。

ScrollTriggerの中でクラスを付与した例

スクロールトリガーの途中でクラスを付けた例が次のデモになります。要素がふわっと表示されるアニメーションを画像につけてみました。

デモページ

スクロールに応じてGSAPでクラスをHTMLに付けて、CSSで動きを変化させています。詳しくは次のコードをご覧ください。

コードの全体像と解説

デモのコードを共有します。

index.html

<body>
    <main>
        <p>↓↓↓スクロールしてください↓↓↓</p>
        <div class="imgs">
            <img src="./images/08.jpg" alt="サンプル画像" width="500" class="fadeIn js-fadeIn">
            <img src="./images/10.jpg" alt="サンプル画像" width="500" class="fadeIn js-fadeIn">
            <img src="./images/11.jpg" alt="サンプル画像" width="500" class="fadeIn js-fadeIn">
        </div>
    </main>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
    <script src="./script.js"></script>
</body>

mainタグの中に画像を3つ配置したシンプルな構成です。imgタグにはfadeInとjs-fadeInのクラスをつけています。
bodyタグの終了直前にGSAPのCDN2つと、自前のscriptを読み込んでいます。

script.js

const fadeInItems = document.querySelectorAll('.js-fadeIn');
fadeInItems.forEach((fadeInItem) => {
    ScrollTrigger.create({
        trigger: fadeInItem,
        start: "top 80%",
        toggleClass: {
            targets: fadeInItem,
            className: "is-active",
        },
        once: true,
    });
});

1行目：アニメーションのターゲットとなるクラスを変数に格納しています。
2行目：foreachで各アイテムに対して繰り返し処理を行っています。
8行目：ScrollTriggerのプロパティであるtoggleClassで、ターゲットとの交差時にis-activeのクラスを付けています。

style.css

.fadeIn {
  opacity: 0;
  transform: translateY(50px);
}

.fadeIn.is-active {
  opacity: 1;
  transform: translateY(0);
  transition: all 1s cubic-bezier(0.22, 1, 0.36, 1);
}

2〜3行目：fadeInのクラスがつく画像の初期値を透明度0、y軸に50px移動しています。
7〜8行目：fadeInの要素にis-activeクラスがつくと、透明度が1、y軸が0になります。
9行目：transitionでそれぞれのアニメーションを1.5秒かけて行うようにしています。

タイムラインの途中でクラスを付与する方法

GSAPでは連続するアニメーションをTimelineを使うことで簡単に実装することができます。

連続するアニメーションとは

例えば、画像の透明度が0から1になった後に、右へ100px移動するなどの連続した動きを指します。GSAPを使うと、動きをオーバーラップさせる（重ねる）ことも容易にできます。

この章ではTimelineを使う際に、クラスを付ける方法を紹介しています。

Timelineの中でクラスを付与した例

タイムラインの途中でクラスを付けた例が次のデモになります。読み込まれると同時に画像が移動して変化するアニメーションを作成してみました。

デモページ

画像に関する一連のアニメーションをタイムラインを使い実装しています。具体的には以下の流れで画像を変化させています。

No	動きの内容	動きの指定方法
1	画像が右に500px移動	JavaScriptアニメーション
2	画像が下に300px移動	JavaScriptアニメーション
3	画像の角丸が50%に変化	CSSアニメーション

アニメーションの詳細

①と②はGSAP（JavaScript）のプロパティで動かしています。

③はHTMLにクラス名、is-activeを付与することにより、CSS側で変化させています。詳しくは次のコードをご覧ください。

コードの全体像と解説

デモのコードを共有します。

index.html

<body>
    <main>
        <img src="./img/sample_img.jpg" alt="サンプル画像" width="300" class="js-target img">
    </main>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    <script src="./sctipt.js"></script>
</body>

mainタグの中に画像を一つ配置しているだけのシンプルな構成です。imgタグにはjs-targetとimgのクラスをつけています。
bodyタグの終了直前にGSAPのCDNと、自前のscriptを読み込んでいます。

script.js

const tl = gsap.timeline();
const target = document.querySelector('.js-target')

tl.to(
    target, {
    x: 500,
    delay: 0.5,
}).to(
    target, {
    y: 300,
}).add(() => {
    target.classList.add('is-active');
});

1行目：timeline()のインスタンスを生成しています。
2行目：アニメーションのターゲットとなるクラスを変数に格納しています。
4〜10行目：timelineで、ページが読み込まれた0.5秒後に、targetをx軸に500px移動、その後y軸に300px移動させています。
11〜12行目：add()メソッドで、targetにクラス名is-activeを追加しています。add()メソッドではコールバック関数を追加することができるので、classList.addを使用してクラスを付与しています。

style.css

.img {
  transition: border-radius 0.5s;
}

.img.is-active {
  border-radius: 50%;
}

6行目：imgにis-activeクラスがつくと、角丸を50%に変化させています。
2行目：transitionで角丸の変化を0.5秒かけておこなうようにしています。

最後に

今回はGSAPのアニメーションにクラスを付与してCSSで動きを制御しました。

一般的には「見た目の装飾」はCSS、「機能や動き」はJavaScriptのように棲み分けした方が明確で保守性も向上すると言われています。

ただ一方で、CSSアニメーションで実現できることもかなり増えてきています。簡易なアニメーションであればJavaScriptでトリガーのみを操作し、動き自体はCSSで作るという実装者もかなり多いように思います。

次のようにアニメーションの中間ステップを細かく制御する場合には、CSSの@keyframesを使う方法が適しているかなと感じています。

.img.is-active {
  animation-name: hogeAnime;
}

@keyframes hogeAnime {
  0% {
      transform-origin: left;
      transform: scaleX(0);
  }
  50% {
      transform-origin: left;
      transform: scaleX(1);
  }
  50.001% {
      transform-origin: right;
  }
  100% {
      transform-origin: right;
      transform: scaleX(0);
  }
}

以上です。最後までお読みいただきありがとうございました！

Webアニメーションを基礎から本格的に勉強するには、1冊ですべて身につくJavaScript入門講座がオススメです。