Div doesn't show with mobile disable

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>

[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;
  }
}

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