Documentation

Vue

AOS Animation

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

File Structure

  • laravel
    • public
      • vendor
        • aos
          • dist
            • 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-delay="700">
    ....
</div>

Script

if(typeof AOS !== typeof undefined ) {
  AOS.init({
    disable:  function() {
      var maxWidth = 996;
      return window.innerWidth < maxWidth;
    },
    once: true,
    duration: 800
  });
}