<div class="scroll-wp">
  <article>1</article>
  <article>2</article>
  <article>3</article>
  <article>4</article>
  <article>5</article>
  <article>6</article>
  <article>7</article>
  <article>8</article>
  <article>9</article>
  <article>10</article>
  
    
</div>
html,body{
  margin:0; padding:0;
}
.infinite-wp{
  position: relative
    height: 100vh;
  overflow: auto;
}
article{
  position: absolute;
  width: 100%;
  height: 35vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  background: whitesmoke;
}
var infiniteGsap = (function () {
  var scrollWp,
    articlesElement,
    imagesBoundingRect = null,
    deltaTotal = 0,
    wrapY,
    lerpCache = 0;

  window.addEventListener("DOMContentLoaded", init)

  function init() {
    scrollWp = document.querySelector(".scroll-wp");
    articlesElement = Array.from(scrollWp.querySelectorAll("article"));
    // console.log(articlesElement);
    
    const wrapColors = gsap.utils.wrap(["red", "green", "blue"]);
    articlesElement.forEach(function(el,i) {
      console.log(wrapColors(i))
      el.style.color = wrapColors(i)
    })
    // console.log(gsap.utils);

    window.addEventListener("resize", _onResize);
    scrollWp.addEventListener("wheel", _onWheel);
    _onResize();

    requestAnimationFrame(_raf);
  }

  function _onResize(e) {
    imagesBoundingRect = articlesElement.map(function (article) {
      return article.getBoundingClientRect();
    });
  
    //set range
    //start pos => minus first height
    var first = -imagesBoundingRect[0].height;
    //end pos => total height
    var last =
      imagesBoundingRect.reduce(function (accumulateur, current) {
        return accumulateur + current.height;
      }, 0) - imagesBoundingRect[0].height;

    wrapY = gsap.utils.wrap(first, last);
  }
  
  function _onWheel(e) {
    // console.log(e.deltaY);
    deltaTotal = deltaTotal - e.deltaY;
    
    //ease next deltaY pos
    lerpCache = lerp(lerpCache, deltaTotal, 0.1);
  }

  function _raf() {
    articlesElement.forEach(function (el, index) {
      const nextY = wrapY(lerpCache + index * imagesBoundingRect[index].height);
      // console.log(newY);
      el.style.transform = "translate3d(0," + nextY + "px, 0)";
    });

    requestAnimationFrame(_raf);
  }

  /*
  for easing scroll
  */
  function lerp(start, end, amt) {
    return (1 - amt) * start + amt * end;
  }
})();
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js