Как оформить анимацию при пролистывании страницы?

Имеется анимация отображения текста при пролистывании, так же рядом с текстом расположен пустой div:

.animation-position {
  border-right: #d0d0d0 3px solid;
  height: 25em;
  margin-left: 8rem;
  width: 2em;
  opacity: 0.5;
}

Хочется чтобы он отображался относительно того что видит пользователь. Анимация текста в js сделана так:

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    console.log(entry)
    if (entry.isIntersecting) {
      entry.target.classList.add('show');
    } else {
      entry.target.classList.remove('show');
    }
  })
});


const hiddenText = document.querySelectorAll('.about-item');
hiddenText.forEach((el) => observer.observe(el));

Но такая же механика с border не работает, как это можно реализовать? Идея с этой анимацией взята с главной страницы github, где полоска появляется при пролистывании, может я подхожу к этому вообще не с той стороны?