TweenMaxとScrollMagicを使ってスクロールアニメーションを行う #2

はじめに

この記事は前回の記事の続編となります。

今回の記事のサンプル

まずはサンプルから。
HTML、CSS、TweenMaxによるアニメーションの記述に変更はないですが、スクロールによるトリガーの実装をScrollMagicに変更しています。

See the Pen TweenMax & ScrollMagic Sample by Soraxism (@soraxism) on CodePen.

各ライブラリの読み込み

jQuery、TweenMax、ScrollMagic本体、ScrollMagicのデバッグインジケータプラグイン、ScrollMagicのTweenMaxプラグインの5種類をCDNから読み込みます。
尚、ScrollMagicはjQuery依存のプラグインとなるため、jQueryの読み込みは必須となります。

HTML

<!-- jQuery本体 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- TweenMax本体 -->
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<!-- ScrollMagic本体 -->
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<!-- ScrollMagicのデバッグインジケータプラグイン -->
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<!-- ScrollMagicのTweenMaxプラグイン -->
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>

HTMLとCSSについて

HTMLとCSSは前回から変更なし。

TweenMax + ScrollMagicの基本的な使い方

コントローラの作成

まずはコントローラの作成を行います。

JavaScript

const controller = new ScrollMagic.Controller()

TweenMaxでのアニメーション作成

後のSceneの作成時に使用するため、アニメーションを変数へ格納しておきます。

JavaScript

// アニメーションスピード
const speed = 1

// TweenMaxでのアニメーション指定
var tween = TweenMax.to('#row-a', speed, {
  backgroundColor: '#4caf50'
})

Sceneの作成

Sceneを作成し、「どの要素に対して」「どのタイミングで」「どのアニメーションが発火するのか」などの具体的な記述を行っていきます。
Sceneに対しては様々な設定値が用意されており、アニメーションの発火タイミングを柔軟に調整できようになっています。

JavaScript

var scene = new ScrollMagic.Scene({
  triggerElement: '#row-a', // 要素の指定
  triggerHook: 'onLeave', // トリガーのスクロール位置指定。onEnter, onLeaveの指定が可能
  reverse: false // スクロールを戻した時にアニメーションの逆再生を行うか
})
  .setTween(tween) // Tweenアニメーション指定
  .addIndicators({ name: 'row-a' }) // デバッグ用インジケータの表示
  .addTo(controller) // コントローラへ追加

JavaScriptについて

以下が前回の記事からトリガー部分をScrollMagicに置き換えたJavaScriptの全体像となります。

JavaScript

// コントローラ作成
const controller = new ScrollMagic.Controller()
// アニメーションスピード
const speed = 1

/**
 * #row-aのアニメーション
 */
// TweenMaxでのアニメーション指定
var tween = TweenMax.to('#row-a', speed, {
  backgroundColor: '#4caf50'
})
var scene = new ScrollMagic.Scene({
  triggerElement: '#row-a', // 要素の指定
  triggerHook: 'onLeave', // トリガーのスクロール位置指定。onEnter, onLeaveの指定が可能
  reverse: false // スクロールを戻した時にアニメーションの逆再生を行うか
})
  .setTween(tween) // Tweenアニメーション指定
  .addIndicators({ name: 'row-a' }) // デバッグ用インジケータの表示
  .addTo(controller) // コントローラへ追加

/**
 * #row-bのアニメーション
 */
var tween = TweenMax.staggerTo(
  '#row-b .item',
  speed,
  {
    x: '-20px',
    opacity: 1
  },
  0.2
)
var scene = new ScrollMagic.Scene({
  triggerElement: '#row-b',
  triggerHook: 'onLeave',
  reverse: false
})
  .setTween(tween)
  .addIndicators({ name: 'row-b' })
  .addTo(controller)

まとめ

TweenMaxとScrollMagicを使うことによって、煩雑になりがちなスクロールアニメーションを簡潔に一貫性を持って記述できるため、コードの見通しがよくなりました。

ScrollMagicはTweenMaxとの連携したアニメーション以外にも、Appleのサイトでよく見るような特定要素を一定区間ピン留めすることや、横スクロールの実装なども簡単に行えます。
是非みなさんも以下のサンプルなどを参考に色々と遊んでみてください。
Examples - ScrollMagic

しかし便利な時代になったなぁ。。