【ScrollMagic】onメソッドとは？簡単な例を紹介します
しばらく暇らしいので連投します（笑）
前回に引き続き、webページのアニメーションをさせる際によく使うライブラリであるScrollMagicについてお話していこうと思います。
ScrollMagicはその名の通り、スクロールをして指定した要素に到達した際にイベントやらアニメーションを発火させるやらができるライブラリです。
簡単な例は以下の通り。
See the Pen
scrollMagicPinSample by nakajima masahiro (@nakajima333ta)
on CodePen.
こちらは、指定した要素に到達したらその要素を指定した時間（duration）分ピン留するという処理となっています。
このように、ScrollMagicの組み込みのメソッドで色々できる場合もありますし、組み込みのメソッドではないとできない処理などもあります。
例えば、上記の例のようなピン留やGSAPと連携したsetTweenメソッドなどがその例でしょう。
ただ、単にクラスを追加したい場合などもあるわけですよね。
そんな時によく使うのが「on」メソッドです！
onメソッドは、簡単に言ってしまえばコールバックを使うことができるメソッドです。
まず、例を見てみましょう。
See the Pen
scrollMagicPinSample by nakajima masahiro (@nakajima333ta)
on CodePen.
こちらは、「trigger」クラスに到達したら「changeColor」クラスを付与して、離れたらクラスを取り除くという処理になっています。
このように、onメソッドのイベントリスナとしてenterやleaveを利用することができ、そのコールバックとして第二引数の関数を実行することができるわけです。
tweenアニメーションのセットなどはsetTweenメソッドで組み込むしかありませんが、簡単なクラスの付与はonメソッドを使った方がいいでしょう。
ちなみに、使えるイベントハンドラはこんな感じ。
- change
- update
- progress
- start
- end
- enter
- leave
それぞれの使い所は様々ですが、個人的にはenter、leave、center、progressくらいがよく使うイメージです。
今回の案件では、全てTweenアニメーションで実装したわけではなく一部CSSアニメーションを使った部分もあり、アニメーションをクラスで管理していたのでonメソッドはかなり重宝しました！
ScrollMagicは一見ややこしい部分もありますがなれたらかなり便利なライブラリなので、これからも積極的に使っていきたいですね。
