GSAPのscrolltrigger.jsのデモ、その1。
markers: true,でトリガーが発生するガイドを表示させています。
.container-a
スクロールでブラウザ中央に.container-aの頭がきたらトリガー発火。
.box01がx軸に400px移動。
.container-b
スクロールでブラウザ中央に.container-bの頭がきたらトリガー発火。
.box02がy軸に-50px移動、背景色を変化。
.container-c
スクロールでブラウザ中央に.container-cの頭がきたらトリガー発火。
.box03が180度回転、スケール1/2に。
.container-d
スクロールでブラウザ中央に.container-dの頭がきたらトリガー発火。
.box04が2秒かけて45度シアー。
.container-e
スクロールでブラウザ中央に.container-eの頭がきたらトリガー発火。
.box05がスクロールに合わせてx軸に600px移動。
.container-f
スクロールでブラウザ中央に.container-fの頭がきたらトリガー発火。
.box06が1秒後に透明度0に。
.container-g
スクロールでブラウザ中央に.container-gの頭がきたらトリガー発火。
.box07が上から順に0.5秒ずつズレて背景色変化。
.container-h
スクロールでブラウザ中央に.container-hの頭がきたらトリガー発火。
.container-hにshadowの指定を記述したclassを付加。
.container-i
スクロールでブラウザ中央に.container-iの頭がきたらトリガー発火。
.section-a（.container-iの親要素）の背景色を変化。
.container-j
スクロールでブラウザ中央に.container-jの頭がきたらトリガー発火。
.box08の位置を固定（position:fixed;）。なぜか.container-jの方に固定の指定がかかってしまいました。
.container-k
スクロールでブラウザ中央に.container-kの頭がきたらトリガー発火。
.box08がx軸方向に100px、y軸方向に-50px移動。toggleActionsの制御付き（スクロールバックで元の状態へリバース）。