AOS.js(スクロールアニメーションライブラリ)を使用している際に、トリガーが速すぎて実行されていないように見える事があります。これはAOS.jsが、HTMLの要素が適切に配置される前に実行されている為です。当記事ではそれを解決するコードを紹介します。
目次(クリックでジャンプ)
AOS.jsで間違ったポイントでトリガーされる/トリガーが速すぎる
AOS.jsで間違ったポイントでトリガーされる/トリガーが速すぎる原因とは
通常のAOS.initの書き方の場合、HTML内の画像などが読み込まれる前に、AOSでページの高さが計算されてしまい、それによりズレが生じ、実行されていないように見えるor実行が速すぎる、というような問題になります。
改善するコード
下記のような形で、JavaScriptファイルへ追記してください。
下記のコードはいずれも、HTML内の画像などが配置された後にAOSを実行する為のコードです。
AOS.init({
startEvent: 'load',
});
または
AOS.init();
window.addEventListener('load', function() {
AOS.refresh();
});
参考記事
Animations triggering very late / on the wrong trigger point (for big viewports) · Issue #135 · mich…
For some reason that I can’t seem to understand, the animations trigger when the element in question reaches the top of my viewport.. (so, very late..) I’ve tri…