【JS】AOS.jsで間違ったポイントでトリガーされる/トリガーが速すぎる

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();
});

参考記事

GitHub

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…