AOS (Animate On Scroll)

Animate on scroll library.

How to use?

Add the following library Aos stylesheet and script in your page.

Copy-paste the stylesheet <link> into your <head> to load the CSS.

<link rel="stylesheet" href="../../assets/vendor/aos/dist/aos.css">

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

<script src="../../assets/vendor/aos/dist/aos.js"></script>

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

<script>
  $(document).on('ready', function () {
    // initialization of aos
    AOS.init({
      duration: 650,
      once: true
    });
  });
</script>

<div data-aos="fade-up"></div>

<div data-aos="fade-down"></div>

<div data-aos="fade-right"></div>

<div data-aos="fade-left"></div>

<div data-aos="fade-up-right"></div>

<div data-aos="fade-up-left"></div>

<div data-aos="fade-down-right"></div>

<div data-aos="fade-down-left"></div>

<div data-aos="flip-left"></div>

<div data-aos="flip-right"></div>

<div data-aos="flip-up"></div>

<div data-aos="flip-down"></div>

<div data-aos="zoom-in"></div>

<div data-aos="zoom-in-up"></div>

<div data-aos="zoom-in-down"></div>

<div data-aos="zoom-in-left"></div>

<div data-aos="zoom-in-right"></div>

<div data-aos="zoom-out"></div>

<div data-aos="zoom-out-up"></div>

<div data-aos="zoom-out-down"></div>

<div data-aos="zoom-out-right"></div>

<div data-aos="zoom-out-left"></div>

<div class="row">
  <div class="col-sm-6 mb-11">
    <div class="card" data-aos="fade-up">
      <div class="card-body" data-aos="fade-up">
        <pre><code class="html"><div data-aos="fade-up"></div></code></pre>
      </div>
    </div>
  </div>
  <div class="col-sm-6 mb-11">
    <div class="card" data-aos="fade-down">
      <div class="card-body" data-aos="fade-down">
        <pre><code><div data-aos="fade-down"></div></code></pre>
      </div>
    </div>
  </div>
  <div class="col-sm-6 mb-11">
    <div class="card" data-aos="fade-right">
      <div class="card-body" data-aos="fade-right">
        <pre><code><div data-aos="fade-right"></div></code></pre>
      </div>
    </div>
  </div>
  <div class="col-sm-6 mb-11">
    <div class="card" data-aos="fade-left">
      <div class="card-body" data-aos="fade-left">
        <pre><code><div data-aos="fade-left"></div></code></pre>
      </div>
    </div>
  </div>
  <div class="col-sm-6 mb-11">
    <div class="card" data-aos="fade-up-right">
      <div class="card-body" data-aos="fade-up-right">
        <pre><code><div data-aos="fade-up-right"></div></code></pre>
      </div>
    </div>
  </div>
  <div class="col-sm-6 mb-11">
    <div class="card" data-aos="fade-up-left">
      <div class="card-body" data-aos="fade-up-left">
        <pre><code><div data-aos="fade-up-left"></div></code></pre>
      </div>
    </div>
  </div>
  <div class="col-sm-6 mb-11">
    <div class="card" data-aos="fade-down-right">
      <div class="card-body" data-aos="fade-down-right">
        <pre><code><div data-aos="fade-down-right"></div></code></pre>
      </div>
    </div>
  </div>
  <div class="col-sm-6 mb-11">
    <div class="card" data-aos="fade-down-left">
      <div class="card-body" data-aos="fade-down-left">
        <pre><code><div data-aos="fade-down-left"></div></code></pre>
      </div>
    </div>
  </div>
  <div class="col-sm-6 mb-11">
    <div class="card" data-aos="flip-left">
      <div class="card-body">
        <pre><code><div data-aos="flip-left"></div></code></pre>
      </div>
    </div>
  </div>
  <div class="col-sm-6 mb-11">
    <div class="card" data-aos="flip-right">
      <div class="card-body">
        <pre><code><div data-aos="flip-right"></div></code></pre>
      </div>
    </div>
  </div>
  <div class="col-sm-6 mb-11">
    <div class="card" data-aos="flip-up">
      <div class="card-body">
        <pre><code><div data-aos="flip-up"></div></code></pre>
      </div>
    </div>
  </div>
  <div class="col-sm-6 mb-11">
    <div class="card" data-aos="flip-down">
      <div class="card-body">
        <pre><code><div data-aos="flip-down"></div></code></pre>
      </div>
    </div>
  </div>
  <div class="col-sm-6 mb-11">
    <div class="card" data-aos="zoom-in">
      <div class="card-body">
        <pre><code><div data-aos="zoom-in"></div></code></pre>
      </div>
    </div>
  </div>
  <div class="col-sm-6 mb-11">
    <div class="card" data-aos="zoom-in-up">
      <div class="card-body">
        <pre><code><div data-aos="zoom-in-up"></div></code></pre>
      </div>
    </div>
  </div>
  <div class="col-sm-6 mb-11">
    <div class="card" data-aos="zoom-in-down">
      <div class="card-body">
        <pre><code><div data-aos="zoom-in-down"></div></code></pre>
      </div>
    </div>
  </div>
  <div class="col-sm-6 mb-11">
    <div class="card" data-aos="zoom-in-left">
      <div class="card-body">
        <pre><code><div data-aos="zoom-in-left"></div></code></pre>
      </div>
    </div>
  </div>
  <div class="col-sm-6 mb-11">
    <div class="card" data-aos="zoom-in-right">
      <div class="card-body">
        <pre><code><div data-aos="zoom-in-right"></div></code></pre>
      </div>
    </div>
  </div>
  <div class="col-sm-6 mb-11">
    <div class="card" data-aos="zoom-out">
      <div class="card-body">
        <pre><code><div data-aos="zoom-out"></div></code></pre>
      </div>
    </div>
  </div>
  <div class="col-sm-6 mb-11">
    <div class="card" data-aos="zoom-out-up">
      <div class="card-body">
        <pre><code><div data-aos="zoom-out-up"></div></code></pre>
      </div>
    </div>
  </div>
  <div class="col-sm-6 mb-11">
    <div class="card" data-aos="zoom-out-down">
      <div class="card-body">
        <pre><code><div data-aos="zoom-out-down"></div></code></pre>
      </div>
    </div>
  </div>
  <div class="col-sm-6 mb-11">
    <div class="card" data-aos="zoom-out-right">
      <div class="card-body">
        <pre><code><div data-aos="zoom-out-right"></div></code></pre>
      </div>
    </div>
  </div>
  <div class="col-sm-6 mb-11">
    <div class="card" data-aos="zoom-out-left">
      <div class="card-body">
        <pre><code><div data-aos="zoom-out-left"></div></code></pre>
      </div>
    </div>
  </div>
</div>