title: How can I animate list items to be apeared one by one with JavaScript?
body: <p>I need to animate (fade in) following list items to be appeared one by one by one. As the <a href="http://europejski.pl/home" rel="nofollow noreferrer">right side drawer in this website</a>. </p>
  
  <pre><code>&lt;ul&gt;
      &lt;li class="fade-item"&gt;Item 01&lt;/li&gt;
      &lt;li class="fade-item"&gt;Item 02&lt;/li&gt;
      &lt;li class="fade-item"&gt;Item 03&lt;/li&gt;
      &lt;li class="fade-item"&gt;Item 04&lt;/li&gt;
      &lt;li class="fade-item"&gt;Item 05&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>This is the JavaScript code.</p>
  
  <pre><code>function fadeItems() {
      var items = document.getElementsByClassName("fade-item");
  
      for (var i = 0; i &lt; items.length; i++) {
          setTimeout(function() {
              items[i].classList.add("fadein");
          }, 3000);
      }
  }
  </code></pre>
  
  <p>Css styles are here.</p>
  
  <pre><code>.fade-item {
      transition: .2s all ease-in-out;
      opacity: 0;
  }
  
  .fade-item .fadein {
      animation: fadeIn 0.9s 1;
      animation-fill-mode: forwards;
  }
  
  @keyframes fadeIn {
      0% {
          opacity: 0;
      }
      100% {
          opacity: 1;
      }
  }
  </code></pre>
  
  <p>When the function is executed it gives following error.</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'classList' of undefined</p>
  </blockquote>
  
  <p>I need this to code using JavaScript.</p>