title: CSS animation - slide line in from left to right next to title
body: <p>Wondering if I could get some help/direction...</p>
  
  <p>Basically, I'm building my portfolio website. Here's work in progress, it's not finished! 
  <a href="https://reenaverma.github.io/" rel="nofollow noreferrer">https://reenaverma.github.io/</a></p>
  
  <p>Basically, when you scroll down the page, you'll see a grey line moves from left, to the middle of the screen.  It should basically be an animation to accompany the title on scroll.  </p>
  
  <p>I basically want the grey line to stop, at the beginning of each title.  So for 'about reena', it should stop before "a", (not underneath).</p>
  
  <p>I wanted to know the best way to achieve this?  The relevant code so far is below.  I got some of this off google and stackoverflow already.</p>
  
  <p>I suppose I could drop the title before a div, (so the animation sits in a div on the left of the title).  And use animate.js fadein/slidein.  But I just wanted to know if there was a better/right way to do this?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;section class="section-white"&gt;
          &lt;div class="container"&gt;
            &lt;div class="flex-grid"&gt;
              &lt;div class="col-white"&gt;
                &lt;h2&gt;&lt;span&gt;about reena&lt;/span&gt;
                  &lt;div class="line"&gt;&lt;/div&gt;
                &lt;/h2&gt;
                &lt;!-- &lt;div id="trainMotion"&gt;
                  &lt;img src="http://i.imgur.com/uKxkshD.png" alt="" 
                  class="line"&gt;
  
                &lt;p&gt;A Full Stack Developer etc etc etc...&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/section&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.line {
   display: block;
   position: relative;
   margin: 0 auto;
   height: 3px;
   background-color: #ccc;
   width: 150px;
   left: -300px;
   transform: translateX(-50%);
  }
  </code></pre>
  
  <p><strong>JAVASCRIPT</strong></p>
  
  <pre><code>$(window).on('scroll',function(){
    const trainPosition = Math.round($(window).scrollTop() / 
  $(window).height() * 100);
  $('.line').css('transform','translateX('+(trainPosition-30)+'%)');
  });
  </code></pre>
  
  <p>Thank you!</p>