<html>
<body>

  <div class="intro">
    <h1>Scroll Down</h1>
  </div>
  
  <div class="staggered-entries">
    
    <div class="inview-element animated fadeInUp" data-delay="200">
      <h2>Fade In Up</h2>
    </div>
    
    <div class="inview-element animated fadeInUp" data-delay="400">
      <h2>Fade In Up</h2>
    </div>
    
    <div class="inview-element animated fadeInUp" data-delay="600">
      <h2>Fade In Up</h2>
    </div>
    
  </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;
}


.staggered-entries {
  display:flex;
  margin-bottom: 100px;
}

.inview-element {
  width:33%;
  height:200px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  border-radius:25px;
  padding: 40px;
  margin-left: 10px;
  margin-right: 10px;
  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(1.3);
}
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 => {
  
  let dataDelay = element.getAttribute('data-delay');
  
  element.style.transitionDelay = dataDelay+'ms';
  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.