index.js

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('fade-in');
    }
  });
});

document.querySelectorAll('.section').forEach(section => {
  observer.observe(section);
});


<style>
.section {
  opacity: 0;
  transition: opacity 1s;
}

.section.fade-in {
  opacity: 1;
}
</style>