jQuery/Vanilla Javascript

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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
ScrollTrigger-GSAP

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

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

公式 Green Sock ScrollTrigger

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

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

<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>

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

複数ある同じ形式(.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;にしているのでここではyのみ記述します。

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)ています。

サンプル

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

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

uhaha

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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

コメント

コメントを残す

*