Do FadeInUp animation when Scrolled to element (javascript)

Question

I have one gallery. I need that pictures in that gallery animate with CSS animation or javascript fadeinup animation. I need to animate this class animation-element or grid li (without adding a class)

    <section class="portfolio">
<div class="container">
<h1> Portfolio </h1>
        <hr>
        <p> Pogledajte moj portfolio. </p>

        <!-- Logo Portfolio -->
        <ul class="grid gallery">
            <li class="animation-element">
                <figure>
                    <img src="img/Logo-1.png" alt="GINIS">
                    <figcaption>
                        <h3>GINIS</h3>
                        <span>Logo</span>
                    </figcaption>
                </figure>
            </li>
            <li class="animation-element">
                <figure>
                    <img src="img/Logo-2.png" alt="img01">
                    <figcaption>
                        <h3>Name</h3>
                        <span>Logo</span>
                    </figcaption>
                </figure>
            </li>
            <li class="animation-element">
                <figure>
                    <img src="img/Logo-3.png" alt="img01">
                    <figcaption>
                        <h3>Name</h3>
                        <span>Logo</span>
                    </figcaption>
                </figure>
            </li>
            <li class="animation-element">
                <figure>
                    <img src="img/Logo-4.png" alt="img01">
                    <figcaption>
                        <h3>Name</h3>
                        <span>Logo</span>
                    </figcaption>
                </figure>
            </li>


        </div>
</section>

Here is my code example: http://codepen.io/anon/pen/GqogdM

Or if it is not possible, i want to simply add class .fadeinup and then, when user scroll to that position add this class to animation-elemnt or grid li :

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

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

Answer 1

I think you are looking for the below animation,Right? You can use following library for your purpose.

http://michalsnik.github.io/aos/