ScrollMagic2系を使って、スクロールに応じたアニメーションをさせてみよう

GSAPを使用する場合

次に以前のバージョンで利用できたGSAPを読み込み、アニメーションに使用する場合の記載です。
以下のようにGSAPを読み込み、対象のプラグインも新たに読み込みます。
※今回はGSAPもCDNから読み込んでいます。

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script><!-- GSAPの読み込み -->
	<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script><!-- GSAP用プラグインの読み込み -->
	<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>

その後は以前のバージョンのように使用することが可能です。
スクロールに合わせてopacityを変更するアニメーションを実装したのが↓のコードです。

// 全体を制御するコントローラをつくります
			var controller = new ScrollMagic.Controller();

			// トリガーになる位置を指定してアニメーションを設定します
			var scene = new ScrollMagic.Scene({
						triggerElement: "#block1" ,
						offset :0
					})
					.setTween("#basicMove1", 2, {opacity:0})  // #block1の要素に到達した際に、対象要素のopacityを2秒かけて0にします
																 // TweenMaxの関数、toと同様の指定が可能です。
					.addIndicators({name: "1 (duration: 0)"})
					.addTo(controller);

以前のバージョンとそこまで変わらない感覚で利用可能です。

Velocity.jsを使用する場合

続いて新たにサポートされたvelocity.jsを使用する方法です。
読み込み方法は以下のような形です。
GSAPの場合と同様、ライブラリを読み込んだのち、対象のプラグインを読み込みます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.velocity.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>

後はGSAPの時とほぼ同様に設定が可能です。

var scene = new ScrollMagic.Scene({
						triggerElement: "#block1" ,
						offset :0
					})
					.setVelocity("#basicMove1", {opacity: 0}, {duration: 2000})  // #block1の要素に到達した際に、対象要素のopacityを2秒かけて0にします
																					  // Velocity.jsで要素をアニメーションさせる際と同様の指定が可能です。
					.addIndicators({name: "1 (duration: 0)"})
					.addTo(controller);

ScrollMagicのバージョン2系はこんな感じに利用可能です。
次回は細かい機能について書けたらと思います。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。