How to turn off AOS animation in mobile screens?

Question

Can anyone please tell me how to turn of animations of my page when it’s being viewed by a mobile device?

I’m using aos library for css to add some animation to my page. But I want to turn that animation off on mobile devices. Any help on that regard will be greatly appreciated. Thanks!

Link of the library: https://michalsnik.github.io/aos/

Answer 1

Maybe you want to do it with CSS but it can be easy with JS. You can use optional settings object on your JS file where you initialize AOS like this:

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

Here you can use following values: 'phone', 'tablet', 'mobile', boolean, expression or function

For more options check https://github.com/michalsnik/aos

Answer 2

You can use this js to specify when exactly you want to disable it.

AOS.init({
  disable: function() {
    var maxWidth = 800;
    return window.innerWidth < maxWidth;
  }
});