rinus2107 commented 7 years ago

Hi, just wanted to say before I ask my question, you've made such an awesome plugin, thank you so much. Now my question is:

I can't seem to get your plugin to work with my code. The content I assign the data-aos tag to just stay at an opacity of 0, no matter what I do. This is my code:

<!doctype html>

Smart Living Symposium

rinus2107 commented 7 years ago

Uhm woww that is one messed up piece of code, sorry everything changed when I pasted it here

michalsnik commented 7 years ago

Hi, you have to init AOS after document is ready. You can do so by either placing AOS.init(); right before </body> or by:

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

anumitaverma commented 7 years ago

Hi, even after I added AOS.init() in my aos/js file and html file, I still cant seem to work it. Please help

skube commented 7 years ago

I'm having the same issue. I've added AOS.init() to my main.js. I'm not getting any errors and all content divs where I've specified data-aos="fade-up" are opacity:0 and never get triggered to be visible.

Note: appears to work for the very first (in viewport already) div only for some reason. Also, if a scroll down to a blank area, then resize the browser, the content will fade in.

michalsnik commented 7 years ago

Try to add this:

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

skube commented 7 years ago

I tried that (#182) but I discovered in my case the content was inside some other divs with overflow: hidden and overflow-y: scroll set. Removing these properties seems to fix the issue.

markwaldin commented 6 years ago

I have the same problem and is driving me crazy. Even copied one of the working samples with no luck

BackHatCreatives commented 6 years ago

@skube yes, the overflow is what is causing the problem. Is there any other way to work around it because I can't really get rid of overflow:auto;?

rsmease commented 6 years ago

I ran into this 'opacity:0' issue and managed to get everything that I wanted (overflow protection + working animations) with:

html { overflow-x: hidden }

@skube @markwaldin thanks for bringing this up; I was convinced my problem was a React/Webpack issue until I ran into this thread.

Raghav-Kumar-Jha commented 6 years ago

Hello guys, I have used this plugin in my real project then it does not show anything, But when I come to the blank area and drag my browser then it shows the effect. But when you will run this in the separate HTML page (Like Try.html) then everything goes perfectly. Please resolve this issue soon. And Thanks for such a nice plugin.

michalsnik commented 6 years ago

Hey @Raghav-Kumar-Jha ! I'm sorry you're having troubles, but without reproducible example I won't be able to help ;/ I tested this on many different projects, browsers and scenarios and it always works for me..

Architechnium commented 6 years ago

This is definitely a reproducable problem for me, using the fade-up animation on an element in the viewport. when I open developer tools, which resizes the viewport, the animation then fades up. awesome program but annoying little bug

Architechnium commented 6 years ago

It must be a bug with the transform3D property that fade-up applies to the element, because using "fade" seems to work just fine

michalsnik commented 6 years ago

Have you tried to clone this repository and run yarn dev locally to confirm whether you get the same problem here @Architechnium? Unfortunately I will be off for few weeks so I won't be able to investigate it more.

But it looks like your layout also recalculates something on resize and AOS seem to too early refreshing position of it's elements.. You might want to add your own listener and refresh AOS manually after small delay. But it's just a guess.

This is the code that is responsible for refreshing AOS on refresh: https://github.com/michalsnik/aos/blob/next/src/js/aos.js#L193

devstc commented 6 years ago

I found this thread because I was trying to solve the problem I was having where if I refreshed (F5) the browser, the AOS animations stopped working. This was happening in Chrome, Firefox, Edge, and IE. In one of the browsers, I can't remember which one, the content wasn't even showing at all. Adding the code @michalsnik posted on Jul 6, 2017 after AOS.init(); solved my problem. Thanks!

miduraa11 commented 5 years ago

Hello @michalsnik I have the same issue like @skube. It's working for first div only and the rest of it when i resize my browser. But in my case when I remove overflow: hidden nothing happened, still the same problem :/

Is there any solution for this?

gitSuyash commented 5 years ago

`content not showing up on using data-aos field`


<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link rel="stylesheet" type="text/css" href="aos.css">

   <link href="https://fonts.googleapis.com/css?family=Raleway|ZCOOL+QingKe+HuangYou" rel="stylesheet">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title></title>
</head>
<body>
 <div id="fullpage">     
        <div class="section"><img src="la.jpg" style="height: 100vh;width: 100vw">
            <div class="cover_text"><a style="color:white">Los</a> Angeles<br><p>Here we play our <a style="color: white">souls out</a>.</p></div></div>
        <div class="section description" >
            <p style="font-size: 24px;">THE BAND</p>
            <p><i style="background-color: grey;color: white;font-size: 20px">We love Music</i></p>
            <p>We have created a fictional band website. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <div class="bandmembers">
                <div><img src="bandmember.jpg"><div>Name</div></div>
<div><img src="bandmember.jpg"><div>Name</div></div>
                <div><img src="bandmember.jpg"><div>Name</div></div>
            </div>
        </div>
        <div class="section tours" data-aos="fade-in">
            <div class="tours_months">
                <div class="months" style="margin-top: 0px;">September <span class="sep">Sold Out</span></div>
<div class="months">October  <span class="oct">Sold Out</span></div>
                <div class="months">November  <span class="nov">10</span></div>
            </div>
        </div>
        <div class="section" data-aos="fade-in">
            <div class="places">
            <div class="tours_places">
                 <img src="sanfran.jpg" >
             <div style="background-color: #F9E79F  ">
              San Francisco<br>         
                21 November,2019  <br>      
                 <a style="background-color: black; color:white;line-height: 30px;" class="tix">BUY TICKETS</a>
                </div>
            </div>
<div class="tours_places place_two" data-aos="fade-in">
    <img src="newyork.jpg" >
             <div style="background-color: #F9E79F ; " >
              New York<br>         
                23 November,2019    <br>      
                    <a style="background-color: black; color:white;line-height: 30px" class="tix">BUY TICKETS</a>
                </div>
</div>
            <div class="tours_places place_three" >
              <img src="paris.jpg" >
             <div style="background-color: #F9E79F  ">
              Paris<br>         
                25 November,2019    <br>      
                     <a style="background-color: black; color:white;line-height: 30px" class="tix">BUY TICKETS</a>
                </div>

            </div>
        </div>
        </div>
    </div>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/vendors/easings.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/vendors/scrolloverflow.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.js"></script>
    <script type="text/javascript">
    new fullpage('#fullpage', {
        //options here
        autoScrolling: true,
        licenseKey: 'OPEN-SOURCE-GPLv3',
    });
    </script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
  AOS.init();
</script>
</body>
</html>`

NetPax commented 5 years ago

I had the same problem. In my case I remove overflow-x: hidden from my html and body tags. Works perfectly.

html, body { background: #ffffff; height: 100%; //overflow-x: hidden; position: relative; }

MustafaKhan026 commented 5 years ago

i used this on my project.but it's not working,all the browser is showing is blank in the section where i used it. please help me resolve this issue.

owenfar commented 4 years ago

Try to add this:

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

document.onreadystatechange = function () {

if (document.readyState == 'complete') 
{
    AOS.refresh();
}

}

This is what did the trick for me. Hope it helps

JarrettAllenYoung commented 4 years ago

replacing

<script>
     AOS.init();
</script>

with

<script>
     $(function() {
          AOS.init();
     });
</script>

worked for me 🤓

whizzbbig commented 4 years ago

how to make aos work with overflow actually i made an parllax effect website using kieth clark theory but i want to animate my second section with aos. but when i add data-aos property to the element to whom i wanted to animate and after that it was not there anymore by readin the comment here i notice that by removing overflow we will able to animate it from aos . but , i not want to remove overlay if i do that my header will messed up coz it parallax plss help me with that .

deepanshupal2003 commented 4 years ago

Thanks @michalsnik

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

This worked like a charm!! 😄

whizzbbig commented 4 years ago

I know that, and I also found the problem why the content was not showing because I defined overflow x and y on a div. can I able to use aos with them because that’s a parallax website and without them parallax website will screw up! Sent from Mail for Windows 10 From: deepanshupal2003Sent: Sunday, May 17, 2020 1:44 AMTo: michalsnik/aosCc: whizzkkid; CommentSubject: Re: [michalsnik/aos] Content not showing up at all (#110) Thanks @michalsnik$(function() { AOS.init(); }); This worked like a charm!! 😄—You are receiving this because you commented.Reply to this email directly, view it on GitHub, or unsubscribe.

kithinga commented 4 years ago

make sure you remove global overflow hidden. especially body and html should not have overflow hidden if you want this to work

sinarkk commented 4 years ago

Im a new user to this , and reading all the comments above couldn't solve my problem , the content is not showing up i gave like this

I am using bootstrap 4 and ensured there is no overflow hidden

<div class="col-sm-4" data-aos="zoom-in"><img src="img/aboutus.jpg" class="img-fluid"></div>

by inspecting element i can see its opacity is set to 0 , i edited and set as 1 in inspect section , then it appears , but still no animation

i have even tried this into script

AOS.init({ duration: 1200, })

but nothing seems to work

this is the only line i'm testing , source's are given as cdn reference and also i use jquery and popper js by bootstrap as cdn

what am i missing?

JMartinesGH commented 4 years ago

Same issue on 2.3.1. elements are stuck on opacity 0. I've tried using $(function () { AOS.init(); window.addEventListener("load", AOS.refresh); }); to no success. Any help would be appreciated.

murdskristians commented 4 years ago

I tried every possible combination that is in this post but nothing worked.

In main.js i import both: import AOS from 'aos' import 'aos/dist/aos.css'

Tried on Created and Mounted state different ways: created () { AOS.init() }, mounted() { AOS.init({ disable: "mobile" }); if (document.readyState == "complete") { AOS.refresh(); } },

Also tried to build a project to have dist folder and importing from there, but also did not work. Also tried to put in App.vue component with and without async: mounted: function() { import('aos').then(AOS => AOS.init()); },

Any other working solutions?

BigPackie commented 4 years ago

@michalsnik Would be nice to include into the documentation a note about overflow property problems.

execreate commented 4 years ago

Hi! I have the same issue, elements with AOS enabled are not showing up at all (opacity: 0) with User Agent Safari on iPhone, iPod touch or iPad mini, on everything else it seems to work quite fine.

AOS initialization:

new Vue({
    created() {
        AOS.init({
            disable: 'mobile',
            duration: 600,
            once: true,
        });
    },
    router,
    render: h => h(App),
}).$mount('#app');

Not a single workaround from this thread helps. I have overflow-x: hidden; on body element, tried to set overflow-y: scroll; too, tried to setEventListener on DOM with both Aos.refresh and Aos.refreshHard, I even tried to initialize AOS with timeout 3 secs. I'd be happy if you could help with this issue.

PS. I am using AOS v.2.3.4.

BigPackie commented 4 years ago

Hi! I have the same issue, elements with AOS enabled are not showing up at all (opacity: 0) with User Agent Safari on iPhone, iPod touch or iPad mini, on everything else it seems to work quite fine.

AOS initialization:
new Vue({
    created() {
        AOS.init({
            disable: 'mobile',
            duration: 600,
            once: true,
        });
    },
    router,
    render: h => h(App),
}).$mount('#app');
Not a single workaround from this thread helps. I have overflow-x: hidden; on body element, tried to set overflow-y: scroll; too, tried to setEventListener on DOM with both Aos.refresh and Aos.refreshHard, I even tried to initialize AOS with timeout 3 secs. I'd be happy if you could help with this issue.

PS. I am using AOS v.2.3.4.

I am not sure if intended, but "disable: mobile" disables AOS on mobile devices, which means the elements should show up without animation. So I suppose it does not work whether or not this option is configured.

Note: inline elements cannot be animated.

I did not try Safari yet.

You can have a look at #https://github.com/michalsnik/aos/issues/336

connie-liou commented 4 years ago

I fixed this issue by including jQuery with my scripts, which I didn't do beforehand. I used the $(function(){...} solution with <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

eelcoverbrugge commented 3 years ago

Same issue with bootstrap 4. Opacity is 0 and so the div is not showing up. @connie-liou adding jquery did not work for me unfortunately. Any idea?

DRenden commented 3 years ago

Hi, faced the same problem in webpack, it worked when I wrote: import AOS from 'aos'; global.AOS = AOS; then in footer $(function() { AOS.init(); });

Jumns commented 3 years ago

I'm using Bootstrap 4 and it's working fine on my system and github page jumns.github.io/myportfoliov1 but not on my domain name www.jnathan.com.ng. it's working on Firefox but not on chrome neither the desktop nor the mobile version. Pls help.

GxyNomad commented 3 years ago

I'm using Bootstrap 4 and it's working fine on my system and github page jumns.github.io/myportfoliov1 but not on my domain name www.jnathan.com.ng. it's working on Firefox but not on chrome neither the desktop nor the mobile version. Pls help.

I just checked on Chrome and it's working fine for me. How did you fix it?

Jumns commented 3 years ago

Try this : $(document).ready(function () { AOS.init({ //code here }); });

Sevicode commented 3 years ago

replacing

<script>
     AOS.init();
</script>

with

<script>
     $(function() {
          AOS.init();
     });
</script>

worked for me

Thanks, this fixed the opacity problem for me, you saved me ! :dancers:

Carlosm99 commented 3 years ago

Nothing of the above has worked for me! Unfortunately!

But I found a solution.

<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>

NomanKader commented 3 years ago

I solved by removing height:100% from body , html{ }.

Prithibee13 commented 3 years ago

When I use Bootstrap collapse toggle system, aos not work(data-aos= fade-up) . I use like this code as a previous question but did not work. my code on jquery toggle $('#bt1').click(function () { $(".collapse").collapse('hide'); AOS.init();
});

Help me solve this.

TIA

maksym1015 commented 3 years ago

Hello, @michalsnik

I used AOS to my Create React App. But it works on the visible component but doesn't work properly on the invisible component.

When I inspect the site it didn't apply to the aos-animate class name to the invisible component.

Ofc, I all did import AOS from "aos"; import "aos/dist/aos.css";

useEffect(() => { AOS.init({ startEvent: "DOMContentLoaded", offset: 200, duration: 3000, once: true, }); }, []);

Already, read the above solutions but have not found the solution. Hope you solve this problem ASAP.

Max

krishna-kush commented 3 years ago

Hi, you have to init AOS after document is ready. You can do so by either placing AOS.init(); right before </body> or by:
$(function() {
  AOS.init();
});

in my case it worked by putting it after closing body tag not before, right before closing html tag. I'm using react btw.

akankshhha commented 3 years ago

Putting the right links in the right places is mandatory.

css link goes in the head section, init & js link go in a script tag, just before the closing of the body tag.

abhiramkg2000 commented 2 years ago

I have added fade-left animation on my website. but it is not working as the fade-left CSS is not getting added to my div and I am getting only plain fade animation on my div. please help

EhsanShahbazii commented 2 years ago

hi. add styles in your head tag:

<link rel="stylesheet" href="your path/aos-master/dist/aos.css" />

then add script before tag then init AOS:

<script src="your path/aos-master/dist/aos.js"></script> <script> AOS.init(); </script>

good luck

Edward1784 commented 2 years ago

This will definitely work inshallah.

document.addEventListener("mousemove", e => {
    AOS.init();
    AOS.refresh();
});

NimaCodez commented 2 years ago

I tried that (#182) but I discovered in my case the content was inside some other divs with overflow: hidden and overflow-y: scroll set. Removing these properties seems to fix the issue.

@skube hey dude, the problem is that i need to use overflow-x:scroll; in my project.. isn't there any way that i can use it?

DamianAexol commented 2 years ago

I've been having this problem on mobile when using dynamic react components, Aos disabled prop and fade-up.

The component kept 0 opacity and was aos transformed.

On the component that is being bugged by data-aos use this:

@media (max-width: {Your disabled width}) { opacity: 1 !important; transform: none !important; }

It worked for me.

ashurohilla commented 2 years ago

Uhm woww that is one messed up piece of code, sorry everything changed when I pasted it here

the same issue i am suffering from all the content where i use the data-aos tag is gone and not more visible when i inspected than i found that a opacity of zero is there so how can i handle this ?

michalsnik / aos

Content not showing up at all #110

`content not showing up on using data-aos field`

TIA