Animation on scroll

How do I remove the 'click' animation? I need it to be smooth.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.13/jquery.scrollify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Scrolling study</title>
    <!-- what is this? -->
    <script src="https://cdn.jsdelivr.net/holder/2.9.4/holder.js"></script>
    <!-- change to fuji icon -->
    <link rel="shortcut icon" href="images/certus-favicon.ico" type="image/x-icon" />
    <!-- link to stylesheet -->
    <link rel="stylesheet" href="styles.css" type="text/css">
    <!-- link to animated.css -->
    <!--    <link rel="stylesheet" href="css/animate.css" type="text/css">-->
    <!-- link to font awesome -->
    <script src="https://use.fontawesome.com/48eaf3ca85.js"></script>
</head>

<body>
    <header class="section">
        <div class="container-flex">
            <h1>I am the header image</h1>
<!--
            <div class="three-column-container">
                <div class="black-circle first"></div>
                <div class="black-circle second"></div>
                <div class="black-circle third"></div>
            </div>
-->
        </div>
    </header>
    <section class="section section1">
        <div class="container-flex">
            <h1>Digital disruption is the new normal</h1>
            <p>It's the digital transformation of:</p>
            <div class="three-column-container">
                <div class="first">
                    <div class="black-circle"></div>
                    <p>hello</p>
                </div>
                <div class="second">
                    <div class="black-circle"></div>
                    <p>hello</p>
                </div>
                <div class="third">
                    <div class="black-circle"></div>
                    <p>hello</p>
                </div>
            </div>
     ...

CSS

body{
    text-align: center;
}

.container-flex {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.three-column-container {
    display: flex;
    flex-direction: row;
}

.black-circle {
    background-color: black;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 20px;
}

.laggard-container{
    margin-top: 50px;
}

.square-animation{
    display: flex;
    flex-direction: row;
}

.square1{
    background-color: rgba(0,0,0,0.25);
}

.square2{
    background-color: rgba(0,0,0,0.5);
}

.square3{
    background-color: rgba(0,0,0,0.75);
}

.square4{
    background-color: rgba(0,0,0,1);
}

.square-animation p{
    font-size: 24px;
    margin-left: 20px;
}

.black-square{
    background-color: black;
    width: 100px;
    height: 100px;
    margin: 20px;
}
/*animations*/

.animated {
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    animation-duration: 1s;
}

.animated.hinge {
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    -ms-animation-duration: 2s;
    animation-duration: 2s;
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(50px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@-moz-keyframes fadeInUp {
    0% {
        opacity: 0;
        -moz-transform: translateY(50px);
    }
    100% {
        opacity: 1;
        -moz-transform: translateY(0);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    -moz-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

JavaScript

$(function () {
     $('.first').hide();
     $('.second').hide();
     $('.third').hide();
     $.scrollify({
         section: ".section"
         , before: function (section) {
             console.log(section);
             if (section == 1) {
                 setTimeout(function () {
                     $('.section1 .first').show();
                     $('.section1 .first').addClass('animated fadeInUp');
                 }, 1500);
                 setTimeout(function () {
                     $('.section1 .second').show();
                     $('.section1 .second').addClass('animated fadeInUp');
                 }, 3000);
                 setTimeout(function () {
                     $('.section1 .third').show();
                     $('.section1 .third').addClass('animated fadeInUp');
                 }, 4500);
             }
             if (section == 2) {
                 setTimeout(function () {
                     $('.section2 .first').show();
                     $('.section2 .first').addClass('animated fadeInUp');
                 }, 1500);
                 setTimeout(function () {
                     $('.section2 .second').show();
                     $('.section2 .second').addClass('animated fadeInUp');
                 }, 3000);
                 setTimeout(function () {
                     $('.section2 .third').show();
                     $('.section2 .third').addClass('animated fadeInUp');
                 }, 4500);
             }
         }
     });
 });