Aos: AOS fade left and right on mobile responsiveness

[joshuaeduards]

When using those, there will be a white space going to be appear on the right side that will cause unresponsiveness of the website.

[cedricengagor]

Have the same bug on my application, were you able to fix it?

[cedricengagor]

I fixed it with a simple overflow-x: hidden => In another issue on this page

[joshuaeduards]

Oh great! Thanks.

[Gcamara14]

Are you supposed add this to the container element, or on the element itself?

[nirajrajgor]

When is the issue gonna solved by the author?

[ragboyjr]

@Gcamara14 I added it on the container element

<div class="row text-center no-gutters" style="overflow-x: hidden">
    <div class="col-12 col-md-4 aos-init aos-animate" data-aos="fade-right">...</div>
    <div class="col-12 col-md-4 aos-init aos-animate" data-aos="fade-up">...</div>
    <div class="col-12 col-md-4 aos-init aos-animate" data-aos="fade-left">...</div>
</div>

Worked great for me.

[michalsnik]

The solution with overflow-x: hidden is fine. I proposed it also in other issues. I'm not sure though it's something I want to add in global AOS styles. As I would probably need to add it on body. I think I'll just add FAQ section in updated readme of upcoming v3.

[grasn]

It is still not fixed in the current version. The page width breaks and gets a bottom slider in the web-browser when using fade left/right. Thanks for the solution, it is still a working fix!

[JohnnyLeWebDeveloper]

Can confirm that this issue is still present when using fade-left and/or fade-right. Using overflow hidden does not appear to resolve this.

[nemoeric]

I fixed it with a simple overflow-x: hidden => In another issue on this page

I love you. Thanks

[ghost]

My 'solution' was to make the with of the div with the data-aos attribute equal to auto (width: auto), so it wrapped around the text instead of wrapping around the entire element itself. I do, however, have to turn it off for tablet users because then the same issues occur. I wonder why the opacity is set to 0 instead of setting it to 0 then set the visibility to hidden in order to take out the elements 'presence' entirely. I feel that could fix this issue entirely!

[squareclouds]

hi guys,

overflow-x for the body was my first idea as well. i implemented it but still the same behaviour... after that i started googling and landed here :) for the people that got it working with overflow, how are your elemnts nested? i tried overflow for body and section (the section has 2 bootstrap columns that are animated from left-right), but still no luck.

@DylanPerez1 i am guessing if they are not visible some elements after the animated ones would just slide up, or parent divs wouldnt have the intended height, etc

EDIT: i can confirm that the overflow-x solution works on safari and firefow mobile IF i use it for the body and html tags. chrome mobile (ios) still shows the white space

[zeromh1810]

i have the same problem and i try to use overflow-x hidden to as well, but when i use it in the body a second scroll bar appeared :/. ¿does anyone has the same problem? ¿how can i fix it?.

[haaidrehman]

i have the same problem and i try to use overflow-x hidden to as well, but when i use it in the body a second scroll bar appeared :/. ¿does anyone has the same problem? ¿how can i fix it?.

Do this ====> (div class="row" style="overflow-x: hidden; overflow-y: hidden;")
It will work for you.

[guido732]

I had the same issue, applying overflow-x on body didn't fix it (weirdly enough on firefox it looked good, I was having issues only on chrome after this)

Applying the overflow-x on the container of the AOS element solved it! (so far)

[saidbagherim]

Thank you mr. Michalsnik

[ositaka]

overflow-x: hidden can be a problem when combining AOS with other plugins, for instance, the Smooth Scrollbar.

After reading the comment of @ragboyjr, I realized we can use just 2 classes for .mobile and for .laptop. I will paste down here the code I end up doing to solve this issue. I hope it can help more people in the future:

CSS

@media (max-width: 767px) {
    .laptop[data-aos] { display: none }
}

@media (min-width: 768px) {
    .mobile[data-aos] { display: none }
}

HTML

<div class="box">
    <div class="mobile" data-aos="fade-up">
        <img src="/assets/img/home-center-bg.jpg" alt="" />
    </div>
    <div class="laptop" data-aos="fade-left">
        <img src="/assets/img/home-center-bg.jpg" alt="" />
    </div>
</div>

You have to use .fade-up or .fade-down on mobile.

[AbdelrahmanAlaa360]

Easiest solution

body {overflow: hidden}

[Priyam1418]

Overflow-x , overflow-y and even overflow nothing is working for me. Tried everything!!

[Y1a2s3h4]

overflow-x : hidden is still working in 2020.

[mkinberg]

I had the same issues in Chrome (mobile & tablet). I found that overflow-x:hidden; fixed a few of my issues but not all. I ended up changing the animation types to fix the outstanding white space margin problems. The animations on my page that were causing issues were "zoom-out" and "fade-left". This makes sense because the large elements on my page were being scaled/positioned outside of the viewfinder and then animated into place. I discovered this because the white space margin disappeared AFTER the animations finished. I hope this helps someone :-)

[Joe-Powell]

put in your css

html,
body{
width:100%;
overflow-x:hidden;
}