【js】AOS.jsでコンテンツが表示されない場合の対処方法

今回はスクロールアニメーションライブラリの「AOS.js」を使用したサイトを構築する際に、正しく設定しているはずなのにコンテンツが表示されない場合の対処方法について説明します。

AOS.jsがうまく動かない時はリフレッシュを行う

AOS.jsは他のjsやHTMLの記述によって、コンテンツの途中からアニメーションが実行されないことがあります。
これは、コンテンツの遅延表示やレンダリングに時間が掛かっている場合に、正しくAOSアニメーションが実行されない為に発生してしまう事象です。
これが発生した場合は、「AOS.init();」の後に「AOS.refresh();」を実行してあげることで解決します。

AOS.jsを正常に動作させるための記述例

他のjsライブラリと組み合わせて再初期化がうまく発生しなかった例として、
スライダーjsライブラリの「slick」を使用したときに発生しましたので、これを例に説明していきます。
まずは、不具合が発生した時の記述です。

$('slider').on('init', function(slick) {
 AOS.init();
}

上記の記述は、slickスライダーを一度初期化した後に、AOS.jsを実行しようとしていますが、コンテンツのレンダリングが間に合わなかった影響でうまく、AOS.jsが実行されませんでした。
この記述を、

$('slider').on('init', function(slick) {
 AOS.init();
 AOS.refresh();
}

にしてリフレッシュしてあげることで、うまくAOS.jsが実行されるようになります。
同じような事象が発生した方は、参考にしてみてください！