スクロールに合わせて要素が動く、動きのあるページを作るときにはjavascriptの助けが必要になります。
要素をjavascriptで監視して、画面に表示されたらイベントを発生し、classの追加や削除を行うことで動きのあるページを実現できます。
スクロールで要素の検出をして、DOMの操作を行うのは、画像のLazyloadなどをイメージするとわかりやすいと思います。
Waypoints
waypointsはリリースパッケージにvanilla js版とjquery版が両方含まれています。
検索して出てくる例はほとんどがjquery版なので、実際使うのはjquery版がおススメです。
jQuery版のファイルサイズは、8.82 KBです。inviewと比べてサイズが大きいです。
更新は止まっています
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js" integrity="sha512-CEiA+78TpP9KAIPzqBvxUv8hy41jyI3f2uHi7DGp/Y/Ka973qgSdybNegWFciqh6GrN2UePx2KkflnQUbUhNIA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
WordPressで使う場合のサンプルスクリプト
function call_waypoint_scrips() {
//waypointスクリプトの呼び出し
wp_enqueue_script( 'waypoint-js', get_stylesheet_directory_uri() . '/assets/js/jquery.waypoints.min.js', array('jquery-core'), false, true );
//実行コードの記入
$data =<<<EOF
(function($) {
$('セレクタ').waypoint(function(direction){
var activePoint = $(this.element);
if (direction === 'down') { //scroll down
activePoint.addClass('active');
}
else{ //scroll up
activePoint.removeClass('active');
}
},{offset : '95%'});
})(jQuery);
EOF;
wp_add_inline_script( 'waypoint-js', $data, 'after' ) ;
}
add_action( 'wp_enqueue_scripts', 'call_waypoint_scrips' );
jquery.inview.js
waypointsと同じく人気のあるjQueryライブラリです。
ファイルサイズが1.4KBと軽量です。
反面、機能はwaypointsと比べて少ないです。
検索すると結構使用例が出てくるので使い方で困ることもないと思います。
更新は止まっています
In-view.js
inview.jsと名前が似ていますが、別物のvanilla jsライブラリになります。
脱Jqueryの人はこちらを使う方がいいのかもしれません。
更新は止まっています

scroll-out
IE11+のモダンブラウザ向け(古いブラウザは未対応)の最新のライブラリです。
sal
モダンブラウザ向け(古いブラウザは未対応)の最新のライブラリです。
delighters.js
ソースを見るととてもとても短いです。
モダンブラウザ向け(古いブラウザは未対応)の最新のライブラリだと思いますが、Browser compatibilityが不明なので使用する場合は要注意です。
Intersection Observerを使ったvanilla js script
わざわざ、javascriptライブラリを使わなくても、Intersection Observerでいい時代になりました。
まとめ
個人的な感想では、アニメーションとセットになっている最新のjavascriptライブラリは使用しない方が幸せな気がしています。
業務で使う場合は、安定感のあるwaypointsを使うのが一般的だと思いますが、それでも多機能がゆえにサイズが大きい欠点があります。
そこまで機能はいらないよという場合は、jquery.inview.jsを使うことや対応ブラウザを考慮して他のライブラリを考えてもいいかもしれません。