How to use Animation When Scrolling with wow.js?

You can use animation on the image, text, and card make your website more attractive.

Step one – HTML Markup:

<div class="container">
    <div class="row">
        <div class="col-lg-4 mt-5">
            <div class="wow bounceInUp" data-wow-duration="1s">
                <img src="https://techsolutionshere.com/wp-content/uploads/2019/02/1.jpg" class="img-thumbnail mb-5" alt="...">
            </div>
        </div>
        <div class="col-lg-4 mt-5">
            <div class="wow bounceInUp" data-wow-duration="2s">
                <img src="https://techsolutionshere.com/wp-content/uploads/2019/02/2.jpg" class="img-thumbnail mb-5" alt="...">
            </div>
        </div>
        <div class="col-lg-4 mt-5">
            <div class="wow bounceInUp" data-wow-duration="3s">
                <img src="https://techsolutionshere.com/wp-content/uploads/2019/02/3.jpg" class="img-thumbnail mb-5" alt="...">
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-4 wow bounceInUp" data-wow-duration="4s">
            <div class="card mb-5">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4 wow bounceInUp" data-wow-duration="5s">
            <div class="card mb-5">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4 wow bounceInUp" data-wow-duration="6s">
            <div class="card mb-5">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-4 wow zoomIn" data-wow-duration="4s">
            <div class="card mb-5">
                <img src="https://techsolutionshere.com/wp-content/uploads/2019/02/1.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">
                    Some quick example text to build on the card title and make up the bulk of the card's content.
                    </p>
                </div>
            </div>
        </div>
    
        <div class="col-lg-4 wow zoomIn" data-wow-duration="5s">
            <div class="card mb-5">
                <img src="https://techsolutionshere.com/wp-content/uploads/2019/02/2.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">
                    Some quick example text to build on the card title and make up the bulk of the card's content.
                    </p>
                </div>
            </div>
        </div>
    
        <div class="col-lg-4 wow zoomIn" data-wow-duration="6s">
            <div class="card mb-5">
                <img src="https://techsolutionshere.com/wp-content/uploads/2019/02/3.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">
                    Some quick example text to build on the card title and make up the bulk of the card's content.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

Step Two – CSS:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
<style>
    body {
        background: #fafafa;
    }
</style>

Step Three – JavaScript:

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script>
new WOW().init();
</script>

Learn more here: wowjs.uk