waypoints/invew test

by James Connolly

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.0/jquery.waypoints.js"></script>
<section></section>
<section class="fadeInUp-transition"></section>
<section class="fadeInLeft-transition"></section>
<section class="fadeInRight-transition"></section>
<section class="fadeInUp-transition"></section>
<section class="fadeInLeft-transition"></section>
<section class="fadeInRight-transition"></section>
<section class="fadeInUp-transition"></section>
<section class="fadeInLeft-transition"></section>
<section class="fadeInRight-transition"></section>
<section class="fadeInUp-transition"></section>
<section class="fadeInLeft-transition"></section>
<section class="fadeInRight-transition"></section>
<section class="fadeInUp-transition"></section>
<section class="fadeInLeft-transition"></section>
<section class="fadeInRight-transition"></section>

SCSS

body {
  min-height: 3000px;
}

section {
  height: 500px;
  margin: 10px;
  z-index: 2;
  background: pink;
}

.fixed {
  background: red;
}

/* animations */

.fadeIn {
  animation: fadeIn 0.75s ease both;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fadeOut {
  animation: fadeOut 0.75s ease both;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.fadeInUp {
  animation: fadeInUp 1s ease-out both;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 300px, 0);
  }

  100% {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

.fadeInLeft {
  animation: fadeInLeft 1s ease-out both;
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    visibility: hidden;
    transform: translate3d(-300px, 0, 0);
  }

  100% {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

.fadeInRight {
  animation: fadeInRight 1s ease-out both;
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    visibility: hidden;
    transform: translate3d(300px, 0, 0);
  }

  100% {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

JavaScript

$('.fadeInUp-transition').each(function() {
  var sectionElement = $(this);
  
  var waypoint = new Waypoint({
    element: sectionElement[0],
    handler: function(direction) {
      if (direction == 'down') {
      	sectionElement.addClass('fadeInUp');
      } else if (direction == "up") {
        sectionElement.removeClass('fadeInUp');
      }
    },
    offset: "90%"
  })
});

$('.fadeInLeft-transition').each(function() {
  var sectionElement = $(this);
  
  var waypoint = new Waypoint({
    element: sectionElement[0],
    handler: function(direction) {
      if (direction == 'down') {
      	sectionElement.addClass('fadeInLeft');
      } else if (direction == "up") {
        sectionElement.removeClass('fadeInLeft');
      }
    },
    offset: "90%"
  })
});

$('.fadeInRight-transition').each(function() {
  var sectionElement = $(this);
  
  var waypoint = new Waypoint({
    element: sectionElement[0],
    handler: function(direction) {
      if (direction == 'down') {
      	sectionElement.addClass('fadeInRight');
      } else if (direction == "up") {
        sectionElement.removeClass('fadeInRight');
      }
    },
    offset: "90%"
  })
});