<h1>Sample 1</h1>
<p>Added fade-in animation on scroll for one container includes five items.</p>
    <div class="container appear">

        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
  

<h1>Sample 2</h1>
<p>Applied fade-in animation for every five-item.</p>
    <div class="container">
        <div class="item appear2">1</div>
        <div class="item appear2">2</div>
        <div class="item appear2">3</div>
        <div class="item appear2">4</div>
        <div class="item appear2">5</div>
    </div>


<h1>Sample 3</h1>
<p>Fade-in animation won't repeate.</p>
    <div class="container appear3">

        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
  



<h1>Spare space</h1>
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
  <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
  
* {
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  margin: 20px;
}

.item {
  background-color: pink;
  height: 100px;
  width: 100px;
  margin: 50px auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 20px;
}

/* animation */
.appear {
  -webkit-transition: all 0.8s;
  transition: all 0.8s;
  opacity: 0;
  -webkit-transform: translateY(40px);
          transform: translateY(40px);
}

.appear.inview {
  opacity: 1;
  -webkit-transform: none;
          transform: none;
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}

.appear2 {
  -webkit-transition: all 0.8s;
  transition: all 0.8s;
  opacity: 0;
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
}

.appear2.inview2 {
  opacity: 1;
  -webkit-transform: none;
          transform: none;
}

.appear2.inview2:nth-child(1) {
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}

.appear2.inview2:nth-child(2) {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}

.appear2.inview2:nth-child(3) {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}

.appear2.inview2:nth-child(4) {
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}

.appear2.inview2:nth-child(5) {
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}

.appear3 {
  -webkit-transition: all 0.8s;
  transition: all 0.8s;
  opacity: 0;
  -webkit-transform: translateY(40px);
          transform: translateY(40px);
}

.appear3.inview {
  opacity: 1;
  -webkit-transform: none;
          transform: none;
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
const appear = document.querySelector('.appear'); 
const cb = function(entries){
  entries.forEach(entry => {
    if(entry.isIntersecting){
      entry.target.classList.add('inview');
    }else{
      entry.target.classList.remove('inview');
    }
  });
}
const io = new IntersectionObserver(cb);
io.observe(appear);




const items = document.querySelectorAll('.appear2');

const active = function(entries){
    entries.forEach(entry => {
        if(entry.isIntersecting){
        entry.target.classList.add('inview2'); 
        }else{
            entry.target.classList.remove('inview2'); 
        }
    });
}
const io2 = new IntersectionObserver(active);
 for(let i=0; i < items.length; i++){
    io2.observe(items[i]);
 }


const appear3 = document.querySelector('.appear3'); 
const cb3 = function(entries){
  entries.forEach(entry => {
    if(entry.isIntersecting){
      entry.target.classList.add('inview');
      entry.unobserve(entry.target)
    }
  });
}
const io3 = new IntersectionObserver(cb3);
io3.observe(appear3);
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js