Aos: DIV disappears when "data-aos" is added

[mattchevalier]

Both aos.css and aos.js are both loading successfully from your CDN as per Inspector's Network tab; and I have the initiate underneath the aos.js in the footer.

When I add data-aos="fade-up" to a DIV, the whole DIV disappears.

Any ideas to what I'm doing wrong?

[Melonai]

I have the Same issue..

[michalsnik]

I think you should init on document ready, and maybe even refresh on window load in order to recalculate positions of trigger points when images finish loading. Eg.:

$(function() {
  AOS.init();
});

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

[michalsnik]

I'm closing this as I think it's another duplicate of #101

[thomas01w]

Hello, I'm having the same problem.
CDNs load correctly, web inspector shows my DIVs have inherited AOS CSS properties, however, when I add the data-aos attribute to any DIV, it just disappears.
AOS.ini() is written right before </body>

From web inspector (on Chrome), I write AOS.init(); in the console. When I hit Enter, the DIV appears (with the fade-up aos animation I had specified), so AOS is initialized, but it fires only once. If I scroll up and down again, the DIV just remains there, visible and static.

Is there a way to declare AOS to do the opposite as aos-once="true" ?
Maybe someone know what am I doing wrong?

EDIT: I found a fix for the issue.
I must say that I'm doing a hack-workaround to remove scrollbars from my project, and in the process I created 3 main containing DIVs that essentially wrap around the 'scrollable' content and push the scrollbar off the viewport.
Anyways, because of this, the scroll event isn't affecting anymore the window element, but rather a DIV with ID #i-c, so I just added a on-scroll function that detected scrolling affecting #i-c and fired the AOS initializer each time:

$('#i-c').on('scroll', function({
AOS.init();
});

The result: Now the animation works perfectly fine when the DIV enters the viewport.

[Venkateshprasads626]

DIV disappears when "data-aos" is added. i also have the same problem.
But i found one solution.
here is previous my code...
html,body{
padding: 0;
margin: 0;
height: 100%;
overflow-x: hidden;
}
after i removing the (overflow-x: hidden) css property its works properly for me.

[kithinga]

i am working on laravel and i am having a problem with most bootstrap components,they are adding the vertical scroll bar. e.g the jumbotron is adding it everytime. is there a way i can fix this without adding custom classes or ids inside the component.

[adibisht41]

For fade-up to work correctly you need to follow 4 basic steps:
1) add "link href='https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css' rel='stylesheet'" inside tag
2) add before the body ends
3) add data-aos="fade-in" in the div, u want to fade up on scroll
4) add javascript :
$( document ).ready(function() {
AOS.init({
easing: 'ease-in-quad',
});
});