AOS (Animate On Scroll)

Animate on scroll library.

AOS documentation

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>
              
            

Basic example

<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>