GSAPのonイベントを使って、画面に表示されている時だけアニメーションさせる

こんにちは、ナカムラです。
今回はアニメーションの演出でよく使うプラグイン「GSAP」の紹介になります。

GSAPとは

アニメーションの実装を助けてくれるjavascriptのプラグインです。
基本的なブラウザはほとんど対応されています。
GSAP | GSAP | Docs & Learning

ライセンス

ユーザーが無料で閲覧・使用できるサイトに対しては自由に使うことができますが、有料コンテンツのあるサイトに使う場合はBusiness Licenseが必要になります。
GSAP | Docs & Learning

GSAPの使い方

プラグインを読み込んだら、javascriptに記述します。
gsapにターゲットにするセレクタと、オプションを設定することでアニメーションをつけていきます。

「GSAPとは」で紹介したページのサンプルを解説すると以下のようになります。

gsap.to(".box",  // ターゲットとなるセレクタ
 // 以下、オプション
{
  rotation: 27, // 回転
  x: 100, //X値
  duration: 1 // 変化する時間
});

メソッド

gsap.to()・・・オプションで設定した状態へと変化させたい時
gsap.from()・・・オプションで設定した状態から変化させたい時
gsap.fromTo()・・・オプションで設定した状態からオプションで設定した状態へ変化させたい時

Docsとチートシート

docsHome | GSAP | Docs & Learning

GSAP | Docs & Learning

画面に表示されている時だけ動かす

さて、ようやく本題です。
色々な機能があって便利なGSAPですが、これが便利！というのがscrollTriggerとtimelineです。
「画面に表示されている時」というのはscrollTriggerを使った動きになります。

scrollTrigger

スクロールした位置に応じてアニメーションをつけることができます。
ScrollTrigger | GSAP | Docs & Learning

timeline

「横に移動したら拡大する」など、アニメーションを連続してつけることが可能です。
gsap.timeline() | GSAP | Docs & Learning

DEMO

背景がグレーの箇所が表示されたら、オレンジの星が回転・スクロールに合わせて拡大されるアニメーションを作りました。
必要なプラグインはpen Settings（JS枠の右上にある歯車のマーク）で読み込んでいます。

https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js
https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js

See the Pen GSAPのonイベントを使って、画面に表示されている時だけアニメーションさせる by Nakamura (@takayo-nakamura) on CodePen.

timelineとscrollTriggerを変数へ代入

変数starにタイムラインとして入れました。

// timelineとscrollTriggerの設定
const star = gsap.timeline({
  scrollTrigger: {
      trigger: '.contents', // スクロールイベントの発火条件となるセレクタ
      start: 'top bottom', //スクロールイベントの開始地点
      end: 'bottom top', //スクロールイベントの終了地点
     // 以下、onイベント
      onEnter: () => {
        play()
      },
      onEnterBack: () => {
        play()
      },
      onLeaveBack: () => {
        pause()
      },
      onLeave: () => {
        pause()
      }
    }
})

startとendの値は、左側がtriggerの位置、右側がスクロールの位置（topなら画面の上、bottomなら画面の下）になります。
50%など、数値で設定することも可能です。

アニメーションの設定

変数starに対して、to()でアニメーションを追加していきます。
一つ目が回転し続けるアニメーション、2つ目はスクロール量に合わせて拡大していくアニメーションです。

// アニメーションの設定
star.to('.star',{
    rotate: 360,
    duration: 3,
    repeat: -1, // ループ
    ease: 'none' //イージングをオフに
})
.to('.star',{
    scale: 8, // 拡大
    scrollTrigger: {
      scrub: true //スクロール量に合わせてアニメーションする
    }
})

ここまでの設定でアニメーションが動作しますが、ずっと動き続けているアニメーションは、そのままだと画面上に表示されていない時も動き続けます。複雑になると処理も重たくなってきますので、必要のないときには止めたいです。

そこで設定するのがonイベントになります。

onイベントでアニメーションを止めたり再生したりする

scrollTriggerの設定の中にあるこの部分です。スクロールした位置と移動方向によって発火するイベントです。通り過ぎた時や戻ってきた時などに対応するために入れています。 console.log()などを追加して状態を確認するとわかりやすいです。

  scrollTrigger: {

     // 省略

      onEnter: () => { // triggerの開始位置を過ぎて前方に移動した時
        play()
      },
      onEnterBack: () => { // triggerの終了位置を過ぎて後方に移動した時
        play()
      },
      onLeaveBack: () => { // triggerの終了位置を過ぎて前方に移動した時
        pause()
      },
      onLeave: () => { // triggerの開始位置を過ぎて後方に移動した時
        pause()
      }
    }

それぞれのイベントに対し、アニメーションを再生する／止める処理の関数を入れました。
チートシートのControl methodsに載っているメソッドを使用しています。

function play(){
  star.play()
  status.textContent = 'play'
}

function pause(){
  star.pause()
  status.textContent = 'pause'
}

statusはわかりやすいように画面右上に状態を表示しています。
開発者ツールでもどんな動きをしているか確認してみてください。

まとめ

GSAPはできることが多過ぎてとっつきにくいですが、今回ご紹介した機能でよくあるアニメーションはつけられるんじゃないかと思います。
基本的にCSSの操作をしてアニメーションをつけていくので、普段からCSSを書いている人にはわかりやすいかと思います。まずはシンプルにto()メソッドからお試しください。

GSAPなどのプラグインを使わなくても、素のjavascriptでスクロールイベントをつけることができます。
こちらも使ってみてください。
▼Intersection Observer APIを使ったスクロールイベントについての記事はこちら tech.arms-soft.co.jp

追記（2024/6/21）

イベントを使わなくてもscrollTriggerのオプションでできます…。
toggleActions: 'play pause play pause'