Tweenmaxを利用した縦方向無限ループスライダー

Tweenmaxで縦方向の無限ループスライダーを実装しています。
左のスライダーは上スタートで無限ループになっていますが、右のスライダーは下スタートでループが終わったら、一番下から再度ループが開始されるのですが、左と同じように無限ループにするにはどのようにすれば良いのでしょうか？
無理でしたら他にこの実装ができそうなライブラリ等があればご教授いただけると幸いです。

<!DOCTYPE html>
<html lang="jp">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <style>
body,
html {
  margin: 0;
  padding: 0;
  
}

ul {
  list-style: none;
}


#wrapper {
  z-index: 1000;
  overflow: hidden;
  overflow-x: hidden;
  overflow-y: hidden;
  position: fixed;
  height: 100%;  
  width: 100%;
}
.box {
  position: fixed;
  display: flex;
  justify-content: center;
  width: 100%;
  } 
 
  </style>
</head>
<body>
  <div id="wrapper">
    <div class="box">
      <div class="loop_js" id="loop_js" style="transform: translate(0%, 0%);">
        <ul>
          <li><a href="#"><img src="![image1](58c1678a0fa2928294c0e0b778cd98a6.jpeg)" alt=""height="200px" width="200px"></a></li>
          <li><a href="#"><img src="![image2](4682479107dca3bc701f9eb2fbc61ce1.jpeg)" alt="" height="200px" width="200px"></a></li>
          <li><a href="#"><img src="![image3](941d45e9712d75c1a1efc8a7ef121bbd.jpeg)" alt="" height="200px" width="200px"></a></li>
          <li><a href="#"><img src="![image4](90f28c6bfd8a4e9b5397689ba8dc4703.jpeg)" alt="" height="200px" width="200px"></a></li>
          <li><a href="#"><img src="![image1](58c1678a0fa2928294c0e0b778cd98a6.jpeg)" alt=""height="200px" width="200px"></a></li>
          <li><a href="#"><img src="![image2](4682479107dca3bc701f9eb2fbc61ce1.jpeg)" alt="" height="200px" width="200px"></a></li>
          <li><a href="#"><img src="![image3](941d45e9712d75c1a1efc8a7ef121bbd.jpeg)" alt="" height="200px" width="200px"></a></li>
          <li><a href="#"><img src="![image4](90f28c6bfd8a4e9b5397689ba8dc4703.jpeg)" alt="" height="200px" width="200px"></a></li>
        </ul>
      </div>
      <div class="loop_js2" id="loop_js2" style="transform: translate(0%,10%);">
        <ul>
          <li><a href="#"><img src="![image1](58c1678a0fa2928294c0e0b778cd98a6.jpeg)" alt=""height="200px" width="200px"></a></li>
          <li><a href="#"><img src="![image2](4682479107dca3bc701f9eb2fbc61ce1.jpeg)" alt="" height="200px" width="200px"></a></li>
          <li><a href="#"><img src="![image3](941d45e9712d75c1a1efc8a7ef121bbd.jpeg)" alt="" height="200px" width="200px"></a></li>
          <li><a href="#"><img src="![image4](90f28c6bfd8a4e9b5397689ba8dc4703.jpeg)" alt="" height="200px" width="200px"></a></li>
         <li><a href="#"><img src="![image1](58c1678a0fa2928294c0e0b778cd98a6.jpeg)" alt=""height="200px" width="200px"></a></li>
          <li><a href="#"><img src="![image2](4682479107dca3bc701f9eb2fbc61ce1.jpeg)" alt="" height="200px" width="200px"></a></li>
          <li><a href="#"><img src="![image3](941d45e9712d75c1a1efc8a7ef121bbd.jpeg)" alt="" height="200px" width="200px"></a></li>
          <li><a href="#"><img src="![image4](90f28c6bfd8a4e9b5397689ba8dc4703.jpeg)" alt="" height="200px" width="200px"></a></li>
         
        </ul>
      </div>

    </div>
  </div> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  <script>
$(function () {
  const loop = document.getElementById('loop_js');
  
  const loopAnim = new TimelineMax({
    repeat: -1 
  });

  let loopItem = (window.innerWidth, loop.children[0]);
  loop.appendChild(loopItem.cloneNode(true));
  loop.appendChild(loopItem.cloneNode(true));
  loop.appendChild(loopItem.cloneNode(true));

  loopAnim
    .to(loop, 30, { ease: Power0.easeNone, yPercent: -66.66666 })
    .to(loop, 0, { ease: Power0.easeNone, y: 0 });

  var mousewheelevent = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
      $(document).on(mousewheelevent,function(e){
          e.preventDefault();
          var delta = e.originalEvent.deltaY ? -(e.originalEvent.deltaY) : e.originalEvent.wheelDelta ? e.originalEvent.wheelDelta : -(e.originalEvent.detail);
          if (delta < 0){
              loopAnim.time(loopAnim.time()+1);
          } else {
            loopAnim.time(loopAnim.time()-1);
          }
      });
});


$(function () {
    const loop = document.getElementById('loop_js2');
    
    const loopAnim = new TimelineMax({
      repeat: -1 
    });

    let loopItem = (window.innerWidth, loop.children[0]);
    loop.appendChild(loopItem.cloneNode(true));
    loop.appendChild(loopItem.cloneNode(true));
    loop.appendChild(loopItem.cloneNode(true));
    
    loopAnim
      .to(loop, 30, { ease: Power0.easeNone, yPercent: -66.66666})
      .to(loop, 0, { ease: Power0.easeNone, y:  0});

      

    var mousewheelevent = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
        $(document).on(mousewheelevent,function(e){
            e.preventDefault();
            var delta = e.originalEvent.deltaY ? -(e.originalEvent.deltaY) : e.originalEvent.wheelDelta ? e.originalEvent.wheelDelta : -(e.originalEvent.detail);
            if (delta < 0){
                loopAnim.time(loopAnim.time()+1);
            } else {
              loopAnim.time(loopAnim.time()-1);
            }
        });
});


  </script>
</body>
</html>