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
  • gulp+scss+hbs
    • src
      • assets
        • 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
  });
}
Previous Next