Documentation

Vue

AOS Animation

Use the required attribute varient (e.g. data-aos="fade-up", data-aos-duration="400") for different AOS animation. For more details

File Structure

  • HTML
    • src
      • assets
        • vendor
          • aos
            • aos.css
            • aos.js 
<!-- AOS Animation Plugin-->
<script src="../assets/vendor/aos/dist/aos.js"></script>

<!-- AOS Animation Style-->
<link rel="stylesheet" href="../assets/vendor/aos/dist/aos.css" />

HTML Code

<div data-aos="fade-up" data-aos-duration="400">
    ....
</div>

Script

setTimeout(() => {
  if(typeof AOS !== typeof undefined ) {
    AOS.init({
      startEvent: 'DOMContentLoaded',
      disable:  function() {
        var maxWidth = 996;
        return window.innerWidth < maxWidth;
      },
      throttleDelay: 10,
      once: true,
      duration: 700,
      offset: 10
    });
  }
}, 150);