Trig.js
Trig.jsは簡単な設定で実装できるスクロール連動アニメーションライブラリです。MITライセンスのもとオープンソースとしてコードが公開されています。
既に多くの同様のライブラリがあるので需要はそう多くは無いでしょうが、軽量で依存もなく使いやすかったので備忘録。使い方もシンプルで、以下のようにJSを読み込んで
<script src="https://cdn.jsdelivr.net/npm/trig-js/src/trig.min.js"></script>
アニメーションさせたい要素にカスタムデータ属性のdata-trig、或いはenable-trigという名のclassを含めます。
<hr data-trig-min="20" data-trig />
あとは要素にCSSでアニメーションを施せばスクロールに連動してCSSで設定したアニメーションが発火する、という仕組みになっています。
greensockのScrollTriggerのような高度なスクロールアニメーションは難しいですが、CSSアニメーションで出来ることをスクロールに連動させられるのがTrig.jsなので、それなりのものは実装できるのではないかと思います。
