JSFiddle - React, Tailwind, and code Playground

by James Connolly

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>
<script src="https://raw.githubusercontent.com/camwiegert/in-view/master/dist/in-view.min.js"></script>
<div class="wrap">
<section class="test"></section>
<section class="test"></section>
<section class="fadeInUp-transition"></section>
<section class="fadeInUp-transition"></section>
<section class="fadeInUp-transition"></section>
<section class="fadeInUp-transition"></section>
<section class="fadeInUp-transition"></section>
<section class="fadeInUp-transition"></section>
<section class="fadeInUp-transition"></section>
<section class="fadeInUp-transition"></section>
<section class="fadeInUp-transition"></section>
<section class="fadeInUp-transition"></section>
<section class="fadeInUp-transition"></section>

SCSS

body {
  margin: 0;
  padding: 0;
}

section {
  display: block;
  height: 200px;
  margin: 10px;
  background: orange;
}

.fadeInUp-transition {
  background: skyblue;
}

.taco {
  background: red;
}

/* animations */

.fadeIn {
  animation: fadeIn 0.5s both;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeInUp {
  animation: fadeInUp 0.5s both;
}

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

// fade out
.fadeOut {
  animation: fadeOut 0.5s both;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

JavaScript

$('.fadeInUp-transition').each(function() {
  var sectionElement = $(this);
  var inview = new Waypoint.Inview({
    element: sectionElement[0],
    entered: function(direction) {
      if (direction === 'down') {
        sectionElement.addClass('taco');
      } else {
        sectionElement.removeClass('taco');

      }
    },
  });
});