Aos: Only firing on window resize

[skube]

I'm finding I can only get AOS working when I resize the browser, and only with elements that are currently in the viewport. Scrolling to a blank element and it remains blank.

I've tried initiating and using refresh to no avail...

AOS.init();
window.addEventListener('load', AOS.refresh);

[michalsnik]

Hey @skube, Is it possible that something is expanding content on your page after load event on window? Solution with window.addEventListener('load', AOS.refresh); should usually fix all the issues with elements not animating.

[skube]

I discovered in my case the content was inside some other divs with overflow: hidden and overflow-y: scroll set. Removing these properties seems to fix the issue.

[rajesh4295]

Finally solved this issue by calling refresh method inside scroll listener on parent container .
For angular, add below code in app.component.ts -> ngOnInit()

$(".parent-container").on('scroll', function () {
      AOS.refresh();
 });

[eidsza1]

Try using

$(window).on("load", function () {
    AOS.init();
});

what is equvalent to

window.addEventListener('load', AOS.init());