I connected the AOS Animate animation library. How can I turn off all animations on mobile devices less than <576px?

  • The code in the studio (html, js, css)! - Stepan Kasyanenko
  • michalsnik.imtqy.com/aos aos animate library. the animation is added using attributes (data-aos = "fade-up"). script connects AOS.init (); I tried the documentation AOS.init ({disable: mobile,}); but then the blocks themselves disappear along with the animation - Dreamer
  • Please add this information to the question. It would also be nice to see an example of use. - Stepan Kasyanenko

3 answers 3

Try to connect this library and your code that applies to it, only from a certain width of the screen.

var width = $(window).width(); console.log(width); if(width >= 576){ *** } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  • I can not, because the animations are added using attributes to the html tags. Example: <div class = "hero-img" data-aos = "fade-up" data-aos-duration = "1000" data-aos-once = "true"> <img src = "images / elements / macbook. png "alt =" "> </ div> - Dreamer
  • So what? If you disable the library with your date attributes, nothing will happen, as with HTML in cella - Alexey Kapustsin

Unnecessary classes in css will not hurt, I hope, and the conditional script and aos styles can be added like this:

 if (window.innerWidth > 576) { var s = document.createElement("script"); s.setAttribute('src','https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js'); document.body.append(s); var l = document.createElement("link"); l.setAttribute('rel', 'stylesheet'); l.setAttribute('type', 'text/css'); l.setAttribute('href', 'https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css'); document.head.append(l); }
  • How to turn it off later?) - Stepan Kasyanenko
  • @StepanKasyanenko then this after March 8? ) - Stranger in the Q
  • Of course not. After the New Year! Everything is updated in the new year .... - Stepan Kasyanenko

@Stranger in the Q your answer solved the problem but not completely, there were problems with animation on the desktop, I combined your answer with another method, everything works fine: I added the ID to the link tag where the css file was connected and deleted on the mobile:

 if (window.innerWidth < 576) { function removeAos() { var elem = document.getElementById('aos-css-file'); elem.parentNode.removeChild(elem); return false; } removeAos(); } AOS.init();