CSS анимация - сдвиньте строку слева направо рядом с заголовком

Удивление, если я смогу получить помощь/направление...

В принципе, я строю свой портфолио. Здесь работа продолжается, это не закончено! https://reenaverma.github.io/

В основном, когда вы прокручиваете страницу вниз, вы увидите, что серая линия перемещается слева, в середину экрана. В основном это анимация, которая будет сопровождать название на свитке.

Я в основном хочу, чтобы серая линия остановилась в начале каждого заголовка. Поэтому для "о reena" он должен остановиться до "a" (не под ним).

Я хотел знать, как лучше всего это достичь? До сих пор соответствующий код ниже. Я уже получил некоторые из этих google и stackoverflow.

Я полагаю, что я мог бы удалить заголовок перед div, (так что анимация сидит в div слева от названия). И используйте animate.js fadein/slidein. Но я просто хотел знать, есть ли лучший/правильный способ сделать это?

HTML

<section class="section-white">
        <div class="container">
          <div class="flex-grid">
            <div class="col-white">
              <h2><span>about reena</span>
                <div class="line"></div>
              </h2>
              <!-- <div id="trainMotion">
                <img src="http://i.imgur.com/uKxkshD.png" alt="" 
                class="line">

              <p>A Full Stack Developer etc etc etc...</p>
            </div>
          </div>
        </div>
      </section>

CSS:

.line {
 display: block;
 position: relative;
 margin: 0 auto;
 height: 3px;
 background-color: #ccc;
 width: 150px;
 left: -300px;
 transform: translateX(-50%);
}

JAVASCRIPT

$(window).on('scroll',function(){
  const trainPosition = Math.round($(window).scrollTop() / 
$(window).height() * 100);
$('.line').css('transform','translateX('+(trainPosition-30)+'%)');
});

Спасибо!