Closed rinus2107 closed 7 years ago
Uhm woww that is one messed up piece of code, sorry everything changed when I pasted it here
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();
});
Hi, even after I added AOS.init() in my aos/js file and html file, I still cant seem to work it. Please help
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.
Try to add this:
window.addEventListener('load', AOS.refresh)
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.
I have the same problem and is driving me crazy. Even copied one of the working samples with no luck
@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;
?
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.
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.
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..
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
It must be a bug with the transform3D property that fade-up applies to the element, because using "fade" seems to work just fine
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
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!
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?
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>`
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; }
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.
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
replacing
<script>
AOS.init();
</script>
with
<script>
$(function() {
AOS.init();
});
</script>
worked for me 🤓
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 .
Thanks @michalsnik
$(function() {
AOS.init();
});
This worked like a charm!! 😄
make sure you remove global overflow hidden. especially body and html should not have overflow hidden if you want this to work
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?
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.
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?
@michalsnik Would be nice to include into the documentation a note about overflow property problems.
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.
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 setoverflow-y: scroll;
too, tried tosetEventListener
on DOM with bothAos.refresh
andAos.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
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>
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?
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(); });
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'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?
Try this : $(document).ready(function () { AOS.init({ //code here }); });
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:
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>
I solved by removing height:100% from body , html{ }.
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.
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
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.
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.
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
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
This will definitely work inshallah.
document.addEventListener("mousemove", e => {
AOS.init();
AOS.refresh();
});
I tried that (#182) but I discovered in my case the content was inside some other divs with
overflow: hidden
andoverflow-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?
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.
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 ?
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>