【GSAP】wow.js代替案。ScrollTriggerのbatchを使った複数連続スクロールアニメーションの作り方

今回はスクロール時に要素をアニメーションとともに出現させることができるScrollTriggerを使ってデモを作ってみました。

• GSAP-ScrollTrigger概要
• ライブラリ読み込み
• • CDN
  • Download
• ScrollTriggerを使った複数スクロールアニメーション
• サンプルデモ
• まとめ

GSAP-ScrollTrigger概要

ScrollTriggerとはGSAP（GreenSock Animation Platform）というアニメーションライブラリよりリリースされたスクロールアニメーション作成に特化したライブラリです。

公式 Green Sock ScrollTrigger

ScrollTriggerによりスクロール時の複雑なアニメーションが実現可能になりました。今回は複数ある同じ形式に一律したアニメーションつけるときに役立つScrollTrigger.batchについて解説していきます。

ライブラリ読み込み

gsap、ScrollTriggerの２つのjsを読み込みます。

CDN

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

Download

GitHub
Code→Download ZIP内の 「gsap(.min ).js 」「ScrollTrigger(.min ).js」を使用します。

ScrollTriggerを使った複数スクロールアニメーション

複数ある同じ形式（.box）に一律したアニメーション（ 100px下から移動するとともに表示される ）をつけます。

HTML

    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>

CSS

.container {
  max-width: 1000px;
  margin: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.box {
  width: 22%;
  height: 100px;
  margin: 1%;
  opacity: 0;
  will-change: transform;
  background: #000;
  overflow: hidden;
}

JS

<script type="text/javascript">
gsap.defaults({ease: "back"});
gsap.set(".box", {y: 100});
ScrollTrigger.batch(".box", {
  onEnter: batch => gsap.to(batch, {opacity: 1, y: 0, stagger: {each: 0.05, grid: [1, 4]}, overwrite: true}),
  onLeave: batch => gsap.set(batch, {opacity: 0, y: -100,overwrite: true}),
  onEnterBack: batch => gsap.to(batch, {opacity: 1, y: 0, stagger: 0.05, overwrite: true}),
  onLeaveBack: batch => gsap.set(batch, {opacity: 0, y: 100, overwrite: true})
});

ScrollTrigger.addEventListener("refreshInit", () => gsap.set(".box", {y: 0}));

</script>

上記のJSを一行ずつ解説していきます。

gsap.defaults({ease: "back"});

以下で「Power0」「Power1」などのEasingを設定できます。
https://greensock.com/docs/v2/Easing

gsap.set(".box", {y: 100});

要素の初期値なので非表示時の数値です。cssでopacity: 0;にしているのでここではｙのみ記述します。

ScrollTrigger.batch()

各.boxに一律にアニメーションを簡単に実行できるようにします。
.batch() は今回のポイントになります。

onEnter: batch => gsap.to(batch, {opacity: 1, y: 0, stagger: {each: 0.05, grid: [1, 4]}, overwrite: true}),

スクロールを上方向に移動しアニメーション可動域に来た場合の処理です。
透明度を100％にし（opacity: 1）、縦位置を元の場所に戻し（y: 0）ます。
またstaggerでグリッドが1行4列ないでアニメーション開始を0.05ずらしています。

onLeave: batch => gsap.set(batch, {opacity: 0, y: -100,overwrite: true}),

スクロール を 下方向に移動しアニメーション可動域から外れた場合の処理です。
再度透明になり（opacity: 0）、縦位置は上に移動し（y: -100）ています。

onEnterBack: batch =>

スクロール を 上方向に移動しアニメーション可動域に来た場合の処理です。
透明度を100％にし（opacity: 1）、縦位置を元の場所に戻し（y: 0）ます。

onLeaveBack: batch =>

スクロール を 上方向に 移動しアニメーション可動域から外れた場合の処理です。
再度透明になり（opacity: 0）、縦位置は下に移動し（y: 100）ています。

サンプルデモ

See the Pen Untitled by uhaha (@uhaha) on CodePen.

まとめ

ScrollTriggerが他のスクロールアニメーションと違うといわれているところはスクロールに同期して今までよりも複雑なアニメーションが可能ということだと思います。今回はbatchから解説するというイレギュラーな形だったのですが基本的には導入の敷居は低いイメージだったので追って別の使用例も作成していけたらです。

wow.jsが有償になり手軽に使えなくなってしまったので一度試してみてはいかがでしょうか。

肝心の動きの感想ですがアニメーションの動き良っっ！てなりました。突っかかることなくヌルヌル動きます！