Animations triggering very late / on the wrong trigger point (for big viewports)

[gkatsanos]

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 tried both the default, as well as data-aos-anchor-placement="top-center" .
I'm initializing the plugin as such:

AOS.init({
  once: true,
});

AOS.refresh();

Here's a video of the problem: https://expirebox.com/download/be03de89751f76c62f5f8912a96eb275.html

What makes this even MORE weird is that it works when I serve my website from a dev server (browsersync actually) . and it also works as intended when I make the viewport size a bit narrower or shorter...!

[michalsnik]

Hey, it looks like you call AOS before the elements are properly placed in your browser. If you load images that are pushing your other elements down after they load you might want to add AOS.refresh() on window load event, or just set:

AOS.init({
  startEvent: 'load',
});

Also make sure you initialize AOS right before closing </body> tag or on DOMContentReady event.

[gkatsanos]

@michalsnik thanks!. startEvent: 'load' does the job, but I don't understand why; you mean the trigger point is miscalculated because it's calculated too early?
I load the script with defer by the way;

[michalsnik]

Hey. Defer makes sure your script doesn't block initial DOM render, so it loads your script after DOM is ready. It's great, but when DOM is ready it doesn't mean your images are. If images don't have a height set they will enlarge as they load, pushing your other elements down. So when you init AOS on DOMContentLoaded it calculates positions of [data-aos] elements but their positions might change when your images finishes loading. Window's event load is being triggered when everything on a page is loaded, including images - that's why this setting makes it work perfectly.

The best solution however is as follows:

AOS.init();

window.addEventListener('load', function() {
  AOS.refresh();
});

[gkatsanos]

Thanks. It's probably that then. Just for investigative reasons I'll try to make a minimal test case without images.

[ryandeussing]

Might I recommend you add this to the README? I lost a lot of time before finding this closed issue.

In my case I'm using Imgix.js and that triggered this issue in Safari. But this fixes it:

window.addEventListener('load', function() {
  AOS.refresh();
});

Thanks!

[michalsnik]

I'm planning to add whole FAQ section with all repeatedly asked questions @ryandeussing :)

[Hendrikv1990]

Hey,

It would be really great if this is added to the README, I had to go through quite some issues to identify which one was relevant. But hugely appreciated @gkatsanos for the debugging explanation, I had exactly the same, and @michalsnik thanks for the solution!

Cheers

[AyoubXwire]

Having the same issue on WordPress, and the problem is exactly caused by an images lazy loading plugin, when I disable it, AOS works just fine, otherwise, the animations trigger more and more late as I scroll down, I understand the issue by reading the comments here, but how do I solve it?

I've tried this solution:

window.addEventListener('load', function() {
  AOS.refresh();
});

but still having the problem.