AOS Working on Desktop but Not on Mobile

[mattsidnell]

AOS works perfectly using CDN servers on desktop but will not work no matter what I try on ios mobile. It does work when I request the desktop view from the mobile browser, so is not a view port issue. I have also tried to add "disable: false," to the AOS.init({}) function, although this makes no difference.

This is:

• Question

Specifications

• AOS version:
• OS: ios
• Browser: Safari

[hannahjohnson438]

I'm having the same issue on Android. When I try to scroll down, nothing happens. It's as though AOS has disabled scrolling on my mobile.

Also having trouble turning it off - I managed to get it to stop working but none of my content would load since its' default opacity was all 0.

[mattsidnell]

Hi,

Is there any update on this issue?

Matt

[JeffersonMat]

Hi there,

I'm trying to desactive the AOS on mobiles but I still want it to work on Desktop. Any suggestions on how I can sort this out?
Thanks!

[almeidatercero]

Hi there,

I'm trying to desactive the AOS on mobiles but I still want it to work on Desktop. Any suggestions on how I can sort this out?
Thanks!

you can disable on mobile with
AOS.init({ disable: 'mobile' });

thats what i did

[neon0047]

Facing the same issue ! Everything just disappears on phone as the opacity is zero. Can anyone help?

[paulvladmuresan]

HTML,BODY { overflow-x:hidden; } is messing up the mobile animations. Please solve this issue

[CofeeDev]

HTML, BODY {overflow-x: hidden; } está estropeando las animaciones móviles. Resuelve este problema

Thank's

[fahedusmanrana]

@mattsidnell I have mentioned a solution which worked for me here #646 (comment)
I hope it will work for you.

[yann-catlinn]

I'm working with Nuxt Vuejs and I`ve found a solution that works for me, is just use aos.js to disable aos, as almeidatercero has commented:

AOS.init({ disable: 'mobile' });

but in addition, i was overwritten aos.css. So I've overwritten the properties in my CSS:

@media only screen and (max-width: 768px) {
    .animated {
        /*CSS transitions*/
        -o-transition-property: none !important;
        -moz-transition-property: none !important;
        -ms-transition-property: none !important;
        -webkit-transition-property: none !important;
        transition-property: none !important;
        /*CSS transforms*/
        -o-transform: none !important;
        -moz-transform: none !important;
        -ms-transform: none !important;
        -webkit-transform: none !important;
        transform: none !important;
        /*CSS animations*/
        -webkit-animation: none !important;
        -moz-animation: none !important;
        -o-animation: none !important;
        -ms-animation: none !important;
        animation: none !important;
    }
    [data-aos^="fade"][data-aos^="fade"],
    [data-aos^="zoom"][data-aos^="zoom"] {
        opacity: 1 !important;
    }
    [data-aos="zoom-in"] {
        transform: scale(1) !important;
    }
}

[hidegh]

Actually it just seems as if the animation point would be shifted. When I use href="#someId" the page scrolls there but the AOS screen is still outside the visible region (overflow x works for desktop). When I start to scroll and I scroll out from the region where I'd the AOS region to be shown I see the AOS region scrolling in...