JSFiddle - React, Tailwind, and code Playground

HTML

<div class="section">
	<div class="element">An element</div>
	<div class="element">An element</div>
	<div class="element">An element</div>
</div>
<div class="section">
	<div class="element">An element</div>
	<div class="element">An element</div>
	<div class="element">An element</div>
</div>
<div class="section">
	<div class="element">An element</div>
	<div class="element">An element</div>
	<div class="element">An element</div>
</div>
<div class="section">
	<div class="element">An element</div>
	<div class="element">An element</div>
	<div class="element">An element</div>
</div>

CSS

html, body {
	height: 100%;
	margin: 0;
}
.section {
	height: 100%;
	background: hsl(230deg, 48%, 48%);
	color: #fff;
	font-family: sans-serif;
	font-size: 32px;
}
.section:nth-child(2) { background: hsl(170deg, 48%, 48%); }
.section:nth-child(3) { background: hsl(50deg, 48%, 48%); }
.section:nth-child(4) { background: hsl(350deg, 48%, 48%); }

.element {
	padding: 24px 16px;
	opacity: 0;
	transform: translateX(-100px);
	transition: opacity 1s, transform 1s;
}
.visible {
	opacity: 1;
	transform: translateX(0);
}

JavaScript

let observer = new IntersectionObserver(updates => {
	updates.forEach(update => {
		if (update.isIntersecting) {
			update.target.classList.add('visible');
		} else {
			update.target.classList.remove('visible');
		}
	});
}, { threshold: 0 });

[...document.querySelectorAll('.element')].forEach(element => observer.observe(element));