title: Animation delay between elements
body: <p>I have a simple reveal animation created with javascript, the problem im having is that the elements on the same row all enter together and i will like to have a small delay between them that im not beeing able to achieve. On mobile as they stack its ok the problem is with desktop.
  Hope someone can help me.
  Many thanks</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function reveal() {
    var reveals = document.querySelectorAll(".reveal");
  
    for (var i = 0; i &lt; reveals.length; i++) {
      var windowHeight = window.innerHeight;
      var elementTop = reveals[i].getBoundingClientRect().top;
      var elementVisible = 150;
  
      if (elementTop &lt; windowHeight - elementVisible) {
        reveals[i].classList.add("active");
      } else {
        reveals[i].classList.remove("active");
      }
    }
  }
  
  window.addEventListener("scroll", reveal);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Arial", sans-serif;
  }
  body{
    background: #42455a;
  }
  section{
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  section:nth-child(1){
    color: #e0ffff;
    }
  section:nth-child(2){
    color: #42455a;
    background: #e0ffff;
  } 
  section:nth-child(3){
    color: #e0ffff;
  }
  section:nth-child(4){
    color: #42455a;
    background: #e0ffff;
  }
  section .container{
    margin: 100px;
  }
  section h1{
    font-size: 3rem;
    margin: 20px;
  }
  section h2{
    font-size: 40px;
    text-align: center;
    text-transform: uppercase;
  }
  section .text-container{
     display: flex;
  }
  section .text-container .text-box{
    margin: 20px;
    padding: 20px;
    background: #00c2cb;
  }
  section .text-container .text-box h3{
    font-size: 30px;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 10px;
  }
  
  @media (max-width: 900px){
    section h1{
      font-size: 2rem;
      text-align: center;
    }
    section .text-container{
      flex-direction: column;
    }
  }
  
  .reveal{
    position: relative;
    transform: translateY(150px);
    opacity: 0;
    transition: 1s all ease;
  }
  
  .reveal.active{
    transform: translateY(0);
    opacity: 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section&gt;
    &lt;h1&gt;Scroll Down to Reveal Elements &amp;#8595;&lt;/h1&gt;
  &lt;/section&gt;
  &lt;section&gt;
    &lt;div class="container"&gt;
      &lt;h2&gt;Caption&lt;/h2&gt;
      &lt;div class="text-container"&gt;
        &lt;div class="text-box reveal"&gt;
          &lt;h3&gt;Section Text&lt;/h3&gt;
          &lt;p&gt;
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
            eius molestiae perferendis eos provident vitae iste.
          &lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="text-box reveal"&gt;
          &lt;h3&gt;Section Text&lt;/h3&gt;
          &lt;p&gt;
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
            eius molestiae perferendis eos provident vitae iste.
          &lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="text-box reveal"&gt;
          &lt;h3&gt;Section Text&lt;/h3&gt;
          &lt;p&gt;
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
            eius molestiae perferendis eos provident vitae iste.
          &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;
  
  &lt;section&gt;
    &lt;div class="container"&gt;
      &lt;h2&gt;Caption&lt;/h2&gt;
      &lt;div class="text-container"&gt;
        &lt;div class="text-box reveal"&gt;
          &lt;h3&gt;Section Text&lt;/h3&gt;
          &lt;p&gt;
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
            eius molestiae perferendis eos provident vitae iste.
          &lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="text-box reveal"&gt;
          &lt;h3&gt;Section Text&lt;/h3&gt;
          &lt;p&gt;
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
            eius molestiae perferendis eos provident vitae iste.
          &lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="text-box reveal"&gt;
          &lt;h3&gt;Section Text&lt;/h3&gt;
          &lt;p&gt;
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
            eius molestiae perferendis eos provident vitae iste.
          &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;
  
  &lt;section&gt;
    &lt;div class="container"&gt;
      &lt;h2&gt;Caption&lt;/h2&gt;
      &lt;div class="text-container"&gt;
        &lt;div class="text-box reveal"&gt;
          &lt;h3&gt;Section Text&lt;/h3&gt;
          &lt;p&gt;
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
            eius molestiae perferendis eos provident vitae iste.
          &lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="text-box reveal"&gt;
          &lt;h3&gt;Section Text&lt;/h3&gt;
          &lt;p&gt;
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
            eius molestiae perferendis eos provident vitae iste.
          &lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="text-box reveal"&gt;
          &lt;h3&gt;Section Text&lt;/h3&gt;
          &lt;p&gt;
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
            eius molestiae perferendis eos provident vitae iste.
          &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>