Div doesn't show with mobile disable

[filippodicostanzo]

This is:

Bug

Specifications

• AOS version: 2.3.4
• OS: Windows
• Browser: Chrome

Expected Behavior

Remove animation for data-aos with config disable: mobile

Actual Behavior

Div with data-aos doesn't show if mobile is disabled

Steps to Reproduce the Problem

in nuxt plugin AOS.init({ disable: 'mobile})

in html <div data-aos="fade-in"></div>

[Taszal]

I have the same problem.

Using AOS.init({ disable: 'mobile}) makes that DIVs where animations are used don't display at all, even on desktop size. I have only white space there.

[ToHe86]

I'm having the same problem for elements loaded async after page loaded. Even a AOS.refresh (); does not solve it, if I refresh after new elements are appended.

[fahedusmanrana]

Hi Guys, I was having the same issue. It was working fine on Desktop but the animation was not working on mobile. (iPhone + Safari Browser) I was testing on it. After researching I found few solutions like adding mobile disabled and overflow for html or body, nothing worked for me. Following solution worked for me. Instead of adding init function in a separate JS file, I had to add the following in the footer of my html file and it started working for me.

<script>
$(function() {
    AOS.init({
        once: true // this one if you want to load animation once else you can remove it
    });
});
</script>

[benhonda]

A bit late to the party but here's the workaround I'm using to disable AOS animation on smaller screen sizes only:

First, disable animation on the screen size of your choice in the AOS.init function:

AOS.init({
  disable: window.innerWidth < 768,
  ...
});

When you set the 'disable' prop it seems AOS will add pointer-events: none and opacity: 0 to your data-aos=* elements, so you need to overwrite the AOS styles in a media query.

For example, if you're using data-aos="fade-up", your custom CSS might look like this:

@media screen and (max-width: 768px) {
  [data-aos] {
    pointer-events: auto !important;
  }

  html:not(.no-js) [data-aos^=fade][data-aos^=fade] {
    opacity: 1 !important;
  }

  html:not(.no-js) [data-aos=fade-up] {
    transform: none !important;
  }
}

[Vijay-navale]

I face this mobile sections going blank issue in react.js.

What I was doing was intializing aos animation in App.js file which is correct.

but to solve this problem for mobile I ended up initializing aos into separate components inside useEffect instead of App.js.

This might solve your problem of section going blank in mobile.

do following:- useEffect(() => { AOS.init({ duration: 2400, disable: "mobile", }); }, [])

[TechInjectIndia]

Hi Guys, I was having the same issue. It was working fine on Desktop but the animation was not working on mobile. (iPhone + Safari Browser) I was testing on it. After researching I found few solutions like adding mobile disabled and overflow for html or body, nothing worked for me. Following solution worked for me. Instead of adding init function in a separate JS file, I had to add the following in the footer of my html file and it started working for me.

<script>
$(function() {
    AOS.init({
        once: true // this one if you want to load animation once else you can remove it
    });
});
</script>

Finally a stupid solution that worked

[mazyn]

A bit late to the party but here's the workaround I'm using to disable AOS animation on smaller screen sizes only:

First, disable animation on the screen size of your choice in the AOS.init function:

AOS.init({
  disable: window.innerWidth < 768,
  ...
});

...

You're a lifesaver! Thanks!

[hassanedelbi]

A bit late to the party but here's the workaround I'm using to disable AOS animation on smaller screen sizes only:

First, disable animation on the screen size of your choice in the AOS.init function:

AOS.init({
  disable: window.innerWidth < 768,
  ...
});

When you set the 'disable' prop it seems AOS will add pointer-events: none and opacity: 0 to your data-aos=* elements, so you need to overwrite the AOS styles in a media query.

For example, if you're using data-aos="fade-up", your custom CSS might look like this:

@media screen and (max-width: 768px) {
  [data-aos] {
    pointer-events: auto !important;
  }

  html:not(.no-js) [data-aos^=fade][data-aos^=fade] {
    opacity: 1 !important;
  }

  html:not(.no-js) [data-aos=fade-up] {
    transform: none !important;
  }
}

Thank you, Actually this is what worked for me:

@media screen and (max-width: 767px) {
  [data-aos] {
    pointer-events: auto !important;
    opacity: 1 !important;
    transform: none !important;
  }
}