ScrollOut.jsでスクロール変化が楽しい！(+ animate.css & Splitting.js)

こんにちは。

スクロール検知シリーズでは割と新しい部類のライブラリでモダンブラウザ向け（IE11以上）。
超軽量で、わずか2.4KB。ライセンスは、MIT。
スクロールを検知するライブラリの中では断トツに超軽量！

公式ドキュメントを読む限り使い方もそこまで難しくなさそうです。
animate.cssやSplitting.jsと併用する事も可能なので、試してみました。
特にanimate.cssとの併用は記事が見つからなかったので参考になると思います。

公式↓
https://scroll-out.github.io/

ScrollOutのインストール方法

CDN、NMPからインストール可能です

html

<script src="https://unpkg.com/scroll-out/dist/scroll-out.min.js"></script>

NMP

npm i scroll-out -S

基本的な使用方法

See the Pen ZEeWoVv by ryota (@ryota1986) on CodePen.

スクロールで変化させたい要素にカスタムデータ属性data-scrollを付与。
そうするとウィンドウに出現した時にdata-scroll="in"が追加される。
CSSで変化を付けてあげる。

scrollout.js + splitting.js

See the Pen VwpadNK by ryota (@ryota1986) on CodePen.

optionを設定すると基本的にtureの時に発火する。
一番最後の<h2 data-scroll>hoge</h2>が動かないのはその為。

scrollout.js + animate.js

See the Pen scrollout.js + animate.css by ryota (@ryota1986) on CodePen.

あれ、animateのclass名の付け方こんなだったけ。。？
最初はclass="animate__backInLeft"にしてadd('animate__animated')をしたが上手く動かなかった。（その逆もダメだった。）
結局両方一緒にaddする事で動く用になった。

add('animate__animated', 'animate__backInLeft')

これ消える時のアニメーションもやりたいなー