<html>
  <body>
    <div class="content">
      <section class="section fadeup">
        <p class="fadeup fade-delay">Scroll down!</p>
      </section>
      <section class="section fadeup">
        <h2 class="fadeup fade-delay">Almost there!</h2>
        <p class="fadeup fade-delay">Keep scrolling...</p>
      </section>
      <section class="section fadeup last">
        <h2 class="fadeup fade-delay">Last Section</h2>
        <div class="container">
          <p class="fadeup fade-delay">Thanks for scrolling!</p>
          <div class="fadeup fade-delay">😋</div>
        </div>    
      </section>
    </div>
  </body>
<html>
body {
 //Extra Styles
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
  text-align: center;
  font-family: 'Helvetica', 'Arial', sans-serif;

  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;

    section {
        border-top-left-radius: 10px;
        border-bottom-right-radius: 10px;

      &.section {
        width: 200px;
        height: 400px;
        background-color: #72bcd4;
        margin-bottom: 10px;

        &:first-child {
        width: 100px;
        height: 500px;
        background-color: #b11226;
        margin-bottom: 10px;
        padding-top: 15px;
        }

        &.last {
        width: 300px;
        background-color: green;
        }
      }
    } 
    //Extra styles

     .fadeup {
      transform: translateY(50px);
      opacity: 0;
      transition-property: transform, opacity;
      transition-duration: 1s;
      transition-timing-function: linear;
     }

    .in-view.fadeup, .in-view .fadeup{ 
        transform: none;
        opacity: 1;
    }
  }
}



View Compiled
  const observerOptions = {
       root: null,
       threshold: 0,
       rootMargin: '0px 0px -50px 0px'
   };

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

window.addEventListener('DOMContentLoaded', (event) => {

const sections = Array.from(document.getElementsByClassName('section'));
   for (let section of sections) {
     const children = section.getElementsByClassName('fade-delay');
     for (let count = 0; count < children.length; count++) {
        children[count].setAttribute('style', 'transition-delay: ' + count * 0.5 + 's');
    }
  observer.observe(section);
}
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.