data-aos not working in second+ full height div

[PixiiBomb]

This is: Possible Bug?

Specifications

• AOS version: 2.3.1
• OS: Windows 10
• Browser: Firefox, Chrome

Expected Behavior

"Div 1" takes up the entire screen (width & height). There are 3 sections in this div that animate. "Div 2" takes up the entire screen, and is placed below Div 1. There are 3 seconds in this div that animate.

Actual Behavior

Everything in "Div1" animates properly. Scroll down to "Div2" -> any section with "data-aos" is invisible. The content won't show up at all. If I hide Div1, then Div2 works (since it's the only thing on the page), and visa versa.

Possible Issue

The problem seems to be with scrolling. Maybe the content in Div2, Div3, Div4, etc... isn't showing up, because somehow AOS isn't recognizing that the website is being scrolled to this section. So the content is invisible.

Before you ask:

Yes, AOS.init() is fine. As stated, the animations are working. They're just not working in multiple full-screen divs. I have also read through/tried multiple issues, and haven'tt found a solution And window.addEventListener('load', AOS.refresh)is added at the very bottom of my footer file

[PixiiBomb]

SOLVED: After digging through some older threads, I realized the problem was in my main CSS file.

I have BODY, HTML ( overflow-x: hidden; }

This is a little bit of a problem, since I really need to have overflow-x: hidden. Removing this means that AOS works properly, but also means that I can't have some animations that fly in from the right side of the screen :\ That's a bit of a bummer, but I'll have to find a workaround

[romelgomez]

Well this is an old problem with this cool lib.

https://github.com/michalsnik/aos/issues?utf8=%E2%9C%93&q=overflow

I guess some simple projects can fixed this removing the overflow directive, but I work with angular-ionic, and ionic ship the styles with this directive in many places.

I like to see an more robust solution than don't depend on remove styles of vendor to test if is this work o.k.

[romelgomez]

The problem is basically relate to the scroll event, it never is triggered, I'am using ionic, material, and theses add a lot styles, and there you will find fixed visibility, high, overflow..., etc; attributes. Theses attributes don't let the observer work properly...

https://github.com/michalsnik/aos/blob/next/src/js/aos.js#L60

If you call explicit the refresh function, the elements start appear.

https://github.com/michalsnik/aos/blob/next/src/js/aos.js#L73

[sebastian-marinescu]

I might have had the same issue and do something like this in a debounced scroll-handler:

if (this.hasAnimateOnScrollElements && !this.aosRefreshed && AOS !== undefined) {
    this.aosRefreshed = true;
    AOS.refresh();
}

And in the constructor (it's a jQuery-widget base project) of course:

this.hasAnimateOnScrollElements = $('[data-aos]').length !== 0;
this.aosRefreshed = false;

[nepp95]

SOLVED: After digging through some older threads, I realized the problem was in my main CSS file.

I have BODY, HTML ( overflow-x: hidden; }

This is a little bit of a problem, since I really need to have overflow-x: hidden. Removing this means that AOS works properly, but also means that I can't have some animations that fly in from the right side of the screen :\ That's a bit of a bummer, but I'll have to find a workaround

This fixed my problem. Overflow seems to mess with AOS.

[Akathian]

SOLVED: After digging through some older threads, I realized the problem was in my main CSS file.

I have BODY, HTML ( overflow-x: hidden; }

This is a little bit of a problem, since I really need to have overflow-x: hidden. Removing this means that AOS works properly, but also means that I can't have some animations that fly in from the right side of the screen :\ That's a bit of a bummer, but I'll have to find a workaround

Solved my issue, much appreciated

[gurucharan2206]

SOLVED: After digging through some older threads, I realized the problem was in my main CSS file.

I have BODY, HTML ( overflow-x: hidden; }

This is a little bit of a problem, since I really need to have overflow-x: hidden. Removing this means that AOS works properly, but also means that I can't have some animations that fly in from the right side of the screen :\ That's a bit of a bummer, but I'll have to find a workaround

In my css file I changed the html, body{ height:100%;} to min-height:100%. This worked for me and resolved the issue without changing the 'overflow-x: hidden'. Here's a link to the explanation I found,

Source: https://stackoverflow.com/questions/35526252/scrolltop-animate-does-not-work-if-html-body-is-overflow-x-hidden