Добавление эффекта прокрутки для нескольких div одного и того же класса

Question

У меня есть веб-сайт, на котором перечисляются статьи, как показано ниже:

Стилизация выполняется таким образом, что класс item_active несколько больше по размеру, тогда как div для Article 1 и Article 3 меньше по размеру. Я хочу добавить эффект прокрутки так, чтобы, как только я прокручивал вниз, текущий активный div медленно уменьшался в размере, и следующий div (который будет следующим активным div) становился больше в размере в той же пропорции. Пожалуйста, предоставьте решение JS или Jquery.

.item{
  width: auto;
  height: 250 px;
  border: 2px;
}

.item_active{
  width: auto;
  height: 300 px;
  border: 2px;
}

<div class="item"> <h1> Article 1 </h1> <br> <p> Description </p> </div> 
<div class="item_active"> <h1> Article 2 </h1> <br> <p> Description </p> </div> 
<div class="item"> <h1> Article 3 </h1> <br> <p> Description </p> </div> 
<div class="item"> <h1> Article 4 </h1> <br> <p> Description </p> </div> 


var listItem = $(".item");
$(window).scroll(function() {
let currentScroll = window.pageYOffset - 5;
$(".item").removeClass("item__active");
for (let i = 0; i < listItem.length; i++) {
  if (currentScroll < listItem[i].offsetTop - 150) {
    if($(window).scrollTop() + $(window).height() > $(document).height() - 90) {
      i=listItem.length-1;
    }
    listItem[i].classList.add("item__active");
    listItem[i].style.transform ='scale(1)';
    listItem[i].style = 'transition-duration: 1.4s';
	
	listItem[i-1].style.transform ='scale(0.87)';
	listItem[i+1].style.transform ='scale(0.87)';
    break;
  }
}
});

Я использовал выше jquery, но он не работает должным образом. Это внезапно меняет размер div, но я хочу, чтобы это изменялось пропорционально прокрутке.