Aos: elements disappear when I add the data-aos code!

Created on 29 Oct 2017 · 15Comments · Source: michalsnik/aos

Source

ferretl

Most helpful comment

Hi there! Please try to add:

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

It should solve all your issues. Sometimes DOMContentLoaded event is just too early to initialize AOS, because some images that we load might change positions of our elements on the page, and AOS then might not recalculate their trigger points.

You can also just use startEvent: 'load' seeting instead of adding additional listener.

If this problem will still occur for you please reopen this issue and provide more informations, that would allow us to debug it properly :)

michalsnik on 18 May 2018

❤3 🎉3 😄2 👍2

All 15 comments

every time I put the code in the elements disappear.
here is an example
<div class="content" data-aos="fade-right">
my content disapeers
<div class="content">
everything stays there

ferretl on 29 Oct 2017

for me too, seems like latest update brought in some bug?

Seculin on 30 Oct 2017

Same here.

Edit: Got it fixed. If you put AOS.init on bottom of your body element then it works.

Operator21 on 4 Nov 2017

do i put AOS.init that is my script tag?

ferretl on 5 Nov 2017

The same thing happened here. New to AOS. I did everything under the rules:

Linked the CSS file
Linked the JS file
Initialized the AOS at the end of the body

<script src="assets/js/aos.js"></script>
<script>
AOS.init();
</script>
</body>

Added the data-aos tag to the DIV element.
<div class="content" data-aos="fade-up">

Anyone have an idea how to fix that issue, @Operator21 @michalsnik?

goragag on 11 Nov 2017

❤1

Edit: The animation seems like is working now.

Though, couple of days ago the HTML had quite strange behaviour. First, the animation didn’t worked. Then I added the data-aos-delay tag and one worked. Then I removed data-aos-delay and animation again worked. The next day when I opened the website, not only the animation didn’t worked, but also the DIV element was not displayed.

Strange. I hope everything will remain satisfactory.

goragag on 11 Nov 2017

@ferretl yes you place it in a script tag.
@goragag Maybe try loading the aos.js in the <head></head> and then initializing at the end of the body.

<head>
    <link type="text/css" rel="assets/css/aos.css">
    <script src="assets/js/aos.js"></script>
</head>
<body>
    <div data-aos="fade-up">
         Hello
    </div>
    <script>
        AOS.init();
    </script>
</body>

bfan1256 on 12 Jan 2018

👎1 👍1

@bfan1256 Thank you. Now AOS works fine. Though I'll write down somewhere your suggestion.

goragag on 12 Jan 2018

Great! I'm glad AOS works for you! It acts very weird sometimes!

bfan1256 on 12 Jan 2018

👍1

My elements are also disappearing. I added the CSS and JS CDN links in my header and initialized as right before my closing body tag. But my element don't show up. Please help

ebruin22 on 6 Feb 2018

@ebruin22 , could you show some more information?

bfan1256 on 7 Feb 2018

Hi there! Please try to add:

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

You can also just use startEvent: 'load' seeting instead of adding additional listener.

If this problem will still occur for you please reopen this issue and provide more informations, that would allow us to debug it properly :)

michalsnik on 18 May 2018

❤3 🎉3 😄2 👍2

this is not working in my real project, the same hidden problem comes again and again. I have tried all the possible ways to initialise it. But it is still not working for me.