AOS Animation

AOS (Animate On Scroll) is a popular JavaScript library that allows developers to easily add animations to web pages as the user scrolls down. AOS provides a simple and efficient way to create dynamic and engaging web designs, without requiring extensive knowledge of complex animation techniques.

See details: https://github.com/michalsnik/aos

data-aos="fade-up"

data-aos="fade-right"

data-aos="fade-up-right"

data-aos="fade-down-right"

data-aos="flip-left"

data-aos="flip-up"

data-aos="zoom-in"

data-aos="zoom-in-down"

data-aos="zoom-in-right"

data-aos="zoom-out-up"

data-aos="fade-down"

data-aos="fade-left"

data-aos="fade-up-left"

data-aos="fade-down-left"

data-aos="flip-right"

data-aos="flip-down"

data-aos="zoom-in-up"

data-aos="zoom-in-left"

data-aos="zoom-out"

data-aos="zoom-out-down"

                
<div class="row">
    <div class="col-md-6">
        <div class="text-center mb-5 mt-5" data-aos="fade-up">
            <img src="assets/imgs/other/card.png" alt="infinia" class="w-75" />
            <p><code>data-aos="fade-up"</code></p>
        </div>
        <div class="text-center mb-5 mt-5" data-aos="fade-right">
            <img src="assets/imgs/other/card-3.png" alt="infinia" class="w-75" />
            <p><code>data-aos="fade-right"</code></p>
        </div>
        <div class="text-center mb-5 mt-5" data-aos="fade-up-right">
            <img src="assets/imgs/other/card.png" alt="infinia" class="w-75" />
            <p><code>data-aos="fade-up-right"</code></p>
        </div>
        <div class="text-center mb-5 mt-5" data-aos="fade-down-right">
            <img src="assets/imgs/other/card-3.png" alt="infinia" class="w-75" />
            <p><code>data-aos="fade-down-right"</code></p>
        </div>
        <div class="text-center mb-5 mt-5" data-aos="flip-left">
            <img src="assets/imgs/other/card.png" alt="infinia" class="w-75" />
            <p><code>data-aos="flip-left"</code></p>
        </div>
        <div class="text-center mb-5 mt-5" data-aos="flip-up">
            <img src="assets/imgs/other/card-3.png" alt="infinia" class="w-75" />
            <p><code>data-aos="flip-up"</code></p>
        </div>

        <div class="text-center mb-5 mt-5" data-aos="zoom-in">
            <img src="assets/imgs/other/card-3.png" alt="infinia" class="w-75" />
            <p><code>data-aos="zoom-in"</code></p>
        </div>
        <div class="text-center mb-5 mt-5" data-aos="zoom-in-down">
            <img src="assets/imgs/other/card-3.png" alt="infinia" class="w-75" />
            <p><code>data-aos="zoom-in-down"</code></p>
        </div>
        <div class="text-center mb-5 mt-5" data-aos="zoom-in-right">
            <img src="assets/imgs/other/card-3.png" alt="infinia" class="w-75" />
            <p><code>data-aos="zoom-in-right"</code></p>
        </div>
        <div class="text-center mb-5 mt-5" data-aos="zoom-out-up">
            <img src="assets/imgs/other/card-3.png" alt="infinia" class="w-75" />
            <p><code>data-aos="zoom-out-up"</code></p>
        </div>
    </div>
    <div class="col-md-6 text-end pt-5 mt-5">
        <div class="text-center mb-5 mt-5" data-aos="fade-down">
            <img src="assets/imgs/other/card-2.png" alt="infinia" class="w-75" />
            <p><code>data-aos="fade-down"</code></p>
        </div>
        <div class="text-center mb-5 mt-5" data-aos="fade-left">
            <img src="assets/imgs/other/card-4.png" alt="infinia" class="w-75" />
            <p><code>data-aos="fade-left"</code></p>
        </div>
        <div class="text-center mb-5 mt-5" data-aos="fade-up-left">
            <img src="assets/imgs/other/card-2.png" alt="infinia" class="w-75" />
            <p><code>data-aos="fade-up-left"</code></p>
        </div>
        <div class="text-center mb-5 mt-5" data-aos="fade-down-left">
            <img src="assets/imgs/other/card-4.png" alt="infinia" class="w-75" />
            <p><code>data-aos="fade-down-left"</code></p>
        </div>
        <div class="text-center mb-5 mt-5" data-aos="flip-right">
            <img src="assets/imgs/other/card-2.png" alt="infinia" class="w-75" />
            <p><code>data-aos="flip-right"</code></p>
        </div>
        <div class="text-center mb-5 mt-5" data-aos="flip-down">
            <img src="assets/imgs/other/card-4.png" alt="infinia" class="w-75" />
            <p><code>data-aos="flip-down"</code></p>
        </div>

        <div class="text-center mb-5 mt-5" data-aos="zoom-in-up">
            <img src="assets/imgs/other/card-4.png" alt="infinia" class="w-75" />
            <p><code>data-aos="zoom-in-up"</code></p>
        </div>
        <div class="text-center mb-5 mt-5" data-aos="zoom-in-left">
            <img src="assets/imgs/other/card-4.png" alt="infinia" class="w-75" />
            <p><code>data-aos="zoom-in-left"</code></p>
        </div>
        <div class="text-center mb-5 mt-5" data-aos="zoom-out">
            <img src="assets/imgs/other/card-4.png" alt="infinia" class="w-75" />
            <p><code>data-aos="zoom-out"</code></p>
        </div>
        <div class="text-center mb-5 mt-5" data-aos="zoom-out-down">
            <img src="assets/imgs/other/card-4.png" alt="infinia" class="w-75" />
            <p><code>data-aos="zoom-out-down"</code></p>
        </div>
    </div>
</div>