<html>
  <body>

    <div class="intro">
      <h1>Scroll Down</h1>
    </div>
      
       <div class="inview-element animated fadeInUp">
  <h2>Fade In Up</h2>
</div>

<div class="inview-element animated fadeInDown">
  <h2>Fade In Down</h2>
</div>

<div class="inview-element animated fadeInLeft">
  <h2>Fade In Left</h2>
</div>

<div class="inview-element animated fadeInRight">
  <h2>Fade In Right</h2>
</div>

<div class="inview-element animated turnIn" data-delay="300">
  <h2>Turn In</h2>
</div>

<div class="inview-element animated zoomIn">
  <h2>Zoom In</h2>
</div>

  </body>
</html>
body {
  font-family: sans-serif;
}

.inview-element, .intro {
  display:flex;
  align-items: center;
  justify-content: center;
}

.intro {
  min-height: 100vh;
  background-color: #eee;
  border-bottom:1px solid #ddd;
  margin-bottom:100px;
  color:#333;
}

.inview-element {
  width:300px;
  height:300px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  border-radius: 25px;
  padding: 40px;
  margin-bottom: 100px;
  margin-left: auto;
  margin-right: auto;
  font-size:14px;
  border-radius:25px;
}

.animated {
  opacity: 0;
  visibility: hidden;
  transition:800ms cubic-bezier(.23,1,.32,1);
  &.inview {
    opacity: 1;
    visibility: visible;
    transform:translate(0);
  }
}

.fadeInUp {
  transform:translateY(50px);
}

.fadeInDown {
  transform:translateY(-50px);
}

.fadeInLeft {
  transform:translateX(25px);
}

.fadeInRight {
  transform:translateX(-25px);
}

.turnIn {
  transform:scaleX(-1);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.zoomIn {
  transform:scale(0.85);
}

.staggered-entries {
  display:flex;
}
View Compiled 
let observedElements = document.querySelectorAll('.inview-element'); // Define the elements you want to intiate an action on

const options = { //define your options
  threshold: 0.5 //50% of the element in view
}

const inViewCallback = entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) { // define the event/property you want to use
      entry.target.classList.add('inview');
      //do something with the element
    }
  });
}
let observer = new IntersectionObserver(inViewCallback,options); // create a new instance using our callback which contains our elements and actions, using the options we defined

observedElements.forEach(element => {
  observer.observe(element) // run the observer 
});

// Apply Animation Classes strictly through Javascript for graceful degradation. 

	/* observedElements.forEach(entry => {
			entry.classList.add('animated');
	}); 

// Alternatively, can be placed directly in markup

let animatedElements = document.querySelectorAll('.animated');
animatedElements.forEach(entry => {
    entry.className  += " animated";
});

*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.