Animate.cssのアニメーションを、jquery.invewプラグインを利用して表示された時に発火させるというものです。jquery.invew側でAnimate.cssのアニメーションを一つ一つ登録して利用することも可能ですが、コードが冗長的になってしまいます。
そこでdata属性を利用してanimate__animatedクラスがある時にdata属性にあるanimate__{animationName}を追加するように記述することで汎用的に利用できます。
<div class="animate__animated" data-animate="animate__zoomIn"></div>$( '.animate__animated' ).on( 'inview', function( event, isInView ) {
if ( isInView ) { //表示領域に入った時
const animateName = $( this ).data( 'animate' );
$( this ).addClass( animateName );
}
} );