Aos: Animations are triggering too late

[jodriscoll]

Bug

Specifications

• AOS version: 2.2.0
• OS: Mac
• Browser: Chrome 78.0

Expected Behavior

I've set the parent container anchor to bottom-bottom, however, it doesn't animate the container in question until it hits a mysterious point.

Actual Behavior

Starts to animate when the block is already half way up the (blank white because nothing is showing) page.

Steps to Reproduce the Problem

Visit https://test-cloudtamer.pantheonsite.io/about-us/ and view the behavior.

Detailed Description

I've tried removing animations from the "Staff Bio" rows, but that still did nothing.

Possible Solution

I'm hoping you have one before I have to dig deeper :|

[eduardocrviana]

For now, I'm solving with an "offset: -250" and it is triggering on bottom of the page.

[TheIllestt]

Having the same issue. using a negative offset is problematic because viewport sizes are variable. Strangest part is that this issue is only present on one snippet on my site. All the others work just fine.

/edit: Right now I'm just using the CDN to implement the library (To avoid installing something that's broken, which I'll just have to uninstall). Could it be that the CDN library is outdated?

/edit: As expected, using a negative offset is problematic for mobile or varying viewport sizes. I ended up making a new data-aos-id="no-mobile" where I override the animations with static design in /aos/dist/aos.css.
```css
/* TEMP MOBILE FIX */
@media only screen and ( ... ) {
[data-aos-id="no-mobile"] { ... }
[data-aos-id="no-mobile"].aos-animate { ... }
}

[andre-brdoch]

I had the same issue, this response fixed it:
https://github.com/michalsnik/aos/issues/135#issuecomment-290919122

The issue was images loading after aos had been initialized, which was increasing the height of the document.

Also, aos has a default data-aos-offset of 120, so make sure to set that one to 0, or whatever you need :)

[paulvladmuresan]

My AOS animations work fine on desktop but on mobile since i applied the overflow-x:hidden property it messed up everything. Sometimes the animations on scroll don't work some times they appear too late, sometimes the stick on the screen. Their position changed as well.