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

## はじめに
この記事は[前回の記事](https://qiita.com/soraxism/items/a81d37fb7cbb4d134ee9)の続編となります。

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

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="js,result" data-user="soraxism" data-slug-hash="rNBMXBX" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="TweenMax &amp;amp; ScrollMagic Sample">
  <span>See the Pen <a href="https://codepen.io/soraxism/pen/rNBMXBX/">
  TweenMax &amp; ScrollMagic Sample</a> by Soraxism (<a href="https://codepen.io/soraxism">@soraxism</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

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

```HTML: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:JavaScript
const controller = new ScrollMagic.Controller()
```

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

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

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

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

```JavaScript: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について
以下が[前回の記事](https://qiita.com/soraxism/items/a81d37fb7cbb4d134ee9)からトリガー部分をScrollMagicに置き換えたJavaScriptの全体像となります。

```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](http://scrollmagic.io/examples/)

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