如何实现页面滚动时逐字文本填充/透明度变化效果（参考joinclyde.com）

我想要实现类似joinclyde.com网站中页面滚动时的文本填充效果，具体是该网站内这段文字的动态效果：

Deepen customer relationships.
Own the brand experience.
Add high margin revenue.
Manage it all in one place.
Get back your precious time.

我尝试实现这个效果，但没能成功，以下是我的尝试代码：

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gradient-text progress-text_text">
  <span class="progress-text_word" >Inside</span>
  <span class="progress-text_word" >our</span>
  <span class="progress-text_word" >homes</span>
  <span class="progress-text_word" >live</span>
  <span class="progress-text_word" >millions</span>
  <span class="progress-text_word" >of</span>
  <span class="progress-text_word" >invisible</span>
  <span class="progress-text_word" >pollutants</span>
  <span class="progress-text_word" >generated</span>
  <span class="progress-text_word" >by</span>
  <span class="progress-text_word" >everyday</span>
  <span class="progress-text_word" >moments.</span>
  <span class="progress-text_word" >homes</span>
  <span class="progress-text_word" >live</span>
  <span class="progress-text_word" >millions</span>
  <span class="progress-text_word" >of</span>
  <span class="progress-text_word" >invisible</span>
  <span class="progress-text_word" >pollutants</span>
  <span class="progress-text_word" >generated</span>
  <span class="progress-text_word" >by</span>
  <span class="progress-text_word" >everyday</span>
  <span class="progress-text_word" >moments.</span>
  <span class="progress-text_word" >homes</span>
  <span class="progress-text_word" >live</span>
  <span class="progress-text_word" >millions</span>
  <span class="progress-text_word" >of</span>
  <span class="progress-text_word" >invisible</span>
  <span class="progress-text_word" >pollutants</span>
  <span class="progress-text_word" >generated</span>
  <span class="progress-text_word" >by</span>
  <span class="progress-text_word" >everyday</span>
  <span class="progress-text_word" >moments.</span>
  <span class="progress-text_word" >homes</span>
  <span class="progress-text_word" >live</span>
  <span class="progress-text_word" >millions</span>
  <span class="progress-text_word" >of</span>
  <span class="progress-text_word" >invisible</span>
  <span class="progress-text_word" >pollutants</span>
  <span class="progress-text_word" >generated</span>
  <span class="progress-text_word" >by</span>
  <span class="progress-text_word" >everyday</span>
  <span class="progress-text_word" >moments.</span>
  <span class="progress-text_word" >homes</span>
  <span class="progress-text_word" >live</span>
  <span class="progress-text_word" >millions</span>
  <span class="progress-text_word" >of</span>
  <span class="progress-text_word" >invisible</span>
  <span class="progress-text_word" >pollutants</span>
  <span class="progress-text_word" >generated</span>
  <span class="progress-text_word" >by</span>
  <span class="progress-text_word" >everyday</span>
  <span class="progress-text_word" >moments.</span>
  <span class="progress-text_word" >homes</span>
  <span class="progress-text_word" >live</span>
  <span class="progress-text_word" >millions</span>
  <span class="progress-text_word" >of</span>
  <span class="progress-text_word" >invisible</span>
  <span class="progress-text_word" >pollutants</span>
  <span class="progress-text_word" >generated</span>
  <span class="progress-text_word" >by</span>
  <span class="progress-text_word" >everyday</span>
  <span class="progress-text_word" >moments.</span>
</div>

CSS代码 #

body{
  background: #000;
  color: #fff;
  overflow: auto;
}
.gradient-text {
  position: relative;
  width: 55vw;
  font-size: 40px;
  color: #f6f6f4;
  margin: auto;
  line-height: 1.5;
  padding: 20px;
  //color: transparent;
  background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(25%, transparent), color-stop(#F8A17B), color-stop(#FDE9E7), color-stop(75%, transparent), to(transparent));
   background: linear-gradient(transparent, transparent 25%, #F8A17B, #FDE9E7, transparent 75%, transparent);
    -webkit-background-clip: text;
    background-clip: text;
    background-size: 100% 500%;
    background-position: center 0;
  
}
 .progress-text_word {
  opacity: 0.4;
  transition: .6s opacity cubic-bezier(0.19,1,0.22,1);
}

JavaScript代码 #

$(window).scroll(function () {
  var scrolled_val = window.scrollY;
         
  console.log( 'scroll pos: '+ scrolled_val );
  progress();
});

function progress() {
  var animation_elements = $('.progress-text_word');
  const delay = 2000;
  
  $("progress-text_word").css('opacity','0.4').each(function(i) {
   //$(this).delay(i*1500).fadeIn(1500);
   $(this).delay(i*200).queue(function (next) { 
   $(this).css('opacity', '1'); 
    next(); 
   });
   })
  $(this).off('scroll');
}

目前我无法实现用户滚动页面时逐字填充文本的效果，猜测可能需要使用JavaScript库，求帮助。

内容的提问来源于stack exchange，提问作者Sejal Shah