CodePen Embed - Simple scroll animation with IntersectionObserver API

<div>
  
  <img class="scroll" src='https://images.unsplash.com/photo-1524946274118-e7680e33ccc5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyODUzNDcwMA&ixlib=rb-1.2.1&q=80&w=1200' alt=''>
  
  <img class="scroll" src='https://images.unsplash.com/photo-1437719417032-8595fd9e9dc6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyODUzNDcwMA&ixlib=rb-1.2.1&q=80&w=1200' alt=''>
  
  <img class="scroll" src='https://images.unsplash.com/photo-1505738093940-b187b0e6d6d9?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyODUzNDcwMA&ixlib=rb-1.2.1&q=80&w=1200' alt=''>
  
  <img class="scroll" src='https://images.unsplash.com/photo-1453872302360-eed3c5f8ff66?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyODUzNDcwMA&ixlib=rb-1.2.1&q=80&w=1200' alt=''>
 
</div>

.scroll {

	opacity: 0;
	transition: all 1s ease-out;
	transform: translate3d(0, 2rem, 0);

}

.scrolled-in {
	
	opacity: 1;
	transform: translate3d(0, 0, 0);

}

/* demo styles */
body {
  margin: 0;  
}

div {
  text-align: center;
}

img {
  max-width: 90%;
  height: auto;
  margin: 5vw;
}

document.addEventListener("DOMContentLoaded", function(event) { 

	// get all of the elements with the 'scroll' class.
	const scrollList = document.querySelectorAll(".scroll")

	const callback = (entries, observer) => {
		entries.forEach((entry) => {

			if (entry.isIntersecting) {

				entry.target.classList.add("scrolled-in");

			}
	  	})
	}
	
	const options = {}
	
	const myObserver = new IntersectionObserver(callback, options)

	scrollList.forEach(scrollItem => {
		myObserver.observe(scrollItem)
	})

});

This Pen is owned by Keith Devon on CodePen.

See more by @keithdevon on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.