Aos: Animation initialization problem on height(max length) screen

[Askarov5]

Hey guys, i always use your plugin in my projects. But i discovered a problem when use it long height pages as catalog last items opens(shows) very late and don't know how to fix it. The screenshot of problem is here: http://joxi.ru/52ab6NVtGnb5wA
This is the page link: http://topaspro.ru/catalog/

[jmartsch]

Hey @Askarov5 I tested your page http://topaspro.ru/catalog/ in Chrome 62, Firefox 57 and Edge on Windows 10, and everything is animating fine.
The fun part is, that I also have a long height page, where AOS works for the first x entries and then it does not work anymore for the following items.
Sadly this page is not open for the public yet

[jmartsch]

@Askarov5 Please also take a look at the issue https://github.com/michalsnik/aos/issues/218 and the comment https://github.com/michalsnik/aos/issues/218#issuecomment-338689194

[Askarov5]

How does it calculate animation start time (show-hide time) ? when i use it in some pages(with long height) it shows (LAST ELEMENTS) very late and hides earlier than normal.

[Brodingo]

@Askarov5 @jmartsch I was able to work around a similar issue by using the startEvent setting.

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

[michalsnik]

@Brodingo provided proper solution ☝️ Alternatively you can also just refresh AOS on load:

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

I'm going to add this part in v3 to remove all similar issues when AOS is being initialized and calculated trigger points too early - when elements are not in their proper positions on the page yet.