title: Fade reveal text from bottom of line break. CSS / JS
body: <p>So, I need to achieve a really nice fade reveal text effect. Imagine a H1 that's spread across two lines. The text would need to reveal up from the base of each line. However I'm unsure of how to do this with multi-lined text (that isn't split into separate heading tags).</p>
  
  <p>Here's one I created already, however this fades everything from the bottom. Ideally I want each line to fade up from its own row.  </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>setTimeout(function(){ 
    $('.ready').addClass('active');
  }, 1500);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.overflow-hidden {
      overflow:hidden;
  }
  
  h1 {
    padding:0;
    max-width:500px;
    margin:0;
    font-family:sans-serif;
  }
  
  .ready {
    opacity:0;
    transform: translateY(50px);
  }
  
  .active {
    opacity:1;
    transform: translateY(0px);
  }
  
  .reveal-in {
    -webkit-transition: all 600ms ease-in-out;
    -moz-transition: all 600ms ease-in-out;
    -ms-transition: all 600ms ease-in-out;
    -o-transition: all 600ms ease-in-out;
    transition: all 600ms ease-in-out;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="overflow-hidden iv-wp"&gt;
      &lt;h1 class="ready reveal-in"&gt;
        This is text over two lines, with a really nice fade effect.
      &lt;/h1&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Similar to this reference - </p>
  
  <p><a href="https://basicagency.com/" rel="nofollow noreferrer">https://basicagency.com/</a></p>
  
  <p>Thanks guys. </p>