<header>
  <h2>All the sections will appear gradually</h2>
</header>
<main>
<div class="will-fadeIn">
  <p>My JS add some class when the window load or scroll in any element which has <strong>.will-fadeIn.</strong> I use the operator % to add diferents class if the element is odd or even.</p>
  <p>In CSS, I use keyframes to create the classes fadeInLeft and fadeInRight, these classes I use add on JS.</p>
  <p>In my JS, if you pass <strong>false</strong> to the <strong>addFadeIn</strong> function, the elements will not keep reappearing</p>
</div>
  <div class="will-fadeIn"></div>
  <div class="will-fadeIn"></div>
  <div class="will-fadeIn"></div>
  <div class="will-fadeIn"></div>
  <div class="will-fadeIn"></div>
  <div class="will-fadeIn"></div>
  <div class="will-fadeIn"></div>
</main>

@mixin animation($str) {
  -webkit-animation: #{$str};
  -moz-animation: #{$str};
  -ms-animation: #{$str};
  -o-animation: #{$str};
  animation: #{$str};   
  @media (prefers-reduced-motion) {
    .animated {
      -webkit-animation: unset !important;
      animation: unset !important;
      -webkit-transition: none !important;
      transition: none !important;
    }
  }   
}

@mixin keyframes($animation-name) {
    @-webkit-keyframes #{$animation-name} {
        @content;
    }
    @-moz-keyframes #{$animation-name} {
        @content;
    }  
    @-ms-keyframes #{$animation-name} {
        @content;
    }
    @-o-keyframes #{$animation-name} {
        @content;
    }  
    @keyframes #{$animation-name} {
        @content;
    }
}

@mixin transform($value){
    -webkit-transform: $value;
    -moz-transform: $value;
    -ms-transform: $value;
    -o-transform: $value;
    transform: $value;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  color: #676767;
}

h2{
  font-weight: 100;
  margin-bottom: 50px;
  text-transform: lowercase;
  margin-top: 40px;
}

p{
  font-size: 13px;
  margin: 15px auto;
}

.doing{
  transform: rotate(-35deg);
  display: block;
  position: absolute;
  top: 0;
  left: -90px;
  margin-top: 25px;
  text-align: center;
  background-color: #15748b;
  width: 300px;
  color: #fff;
  padding: 5px 0px;
}

.will-fadeIn{
  display: block;
  width: 100%;
  max-width: 640px;
  margin: 20px auto;
  height: 250px;
  background-color: #b7f7f7;
  padding: 10px;
  &:nth-child(odd) {
    background: #ffeded
  }
  &:first-child{
    height: auto;
    background-color: #edffff;
  }
}

.fadeInRight {
    @include animation('fadeInRight .5s ease .4s both');

}

.fadeInLeft {
    @include animation('fadeInLeft .5s ease .4s both');
}

@include keyframes(fadeInRight) {
    from {
        opacity: 0;
        @include transform( translate3d(100%, 0, 0));
    }

    to {
        opacity: 1;
        @include transform( translate3d(0, 0, 0));
    }
}

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

    to {
        opacity: 1;
        @include transform( translate3d(0, 0, 0));
    }
}

function Utils() {}
        Utils.prototype = {
            constructor: Utils,
            isElementInView: function (element, fullyInView) {
                var pageTop = $(window).scrollTop();
                var pageBottom = pageTop + $(window).height();
                var elementTop = $(element).offset().top;
                var elementBottom = elementTop + $(element).height();

                if (fullyInView === true) {
                    return ((pageTop < elementTop) && (pageBottom > elementBottom));
                } else {
                    return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
                }
            }
        };

        var Utils = new Utils();
        $(window).on('load', addFadeIn());
        
        $(window).scroll(function() {
            addFadeIn(true);
        });

function addFadeIn(repeat) {
            var classToFadeIn = ".will-fadeIn";
            
            $(classToFadeIn).each(function( index ) {
                var isElementInView = Utils.isElementInView($(this), false);
                if (isElementInView) {
                    if(!($(this).hasClass('fadeInRight')) && !($(this).hasClass('fadeInLeft'))) {
                        if(index % 2 == 0) $(this).addClass('fadeInRight');
                        else $(this).addClass('fadeInLeft');
                    }
                } else if(repeat) {
                    $(this).removeClass('fadeInRight');
                    $(this).removeClass('fadeInLeft');
                }
            });
        }