複数のdivを同じスピードで順次positionの変更をしていくと、隙間ができる。

https://codepen.io/tadashi___/pen/mwdOZp

上記のcodepenのように、
複数のcを連ねて、画面に入っているもののみtranslateYを上にずらしていく。
divの底辺が画面内にはいったら次のdomを一緒に動かしていく。
という内容を実装しています。

この時、velocityを6秒おきにランダムな速度に変更していますが
velocityの速度が速い時、divとdivの間に不均等に隙間が生じてしまいます。

framerateが低いわけはないのですが、どのあたりの計算を見直すべきかわからず。。
ご教示いただければ幸いです。

下記箇所で3つのdivを、自分の座標+=velocity*侵攻方向として移動しています。

function updatePosition(){


  if(_past2View){
    let _num = _positions[_past2Index] += velocity * _direction;
    _past2View.style.setProperty('transform', `translateY(${ _num }px)`);    
  }

  if(_pastView){
    let _num = _positions[_pastIndex] += velocity * _direction;
    _pastView.style.setProperty('transform', `translateY(${ _num }px)`);    
  }

  let _num = _positions[_currentIndex] += velocity * _direction;
  _currentView.style.setProperty('transform', `translateY(${ _num }px)`);    

}

上記処理の前に下記も実行していきます。

function updateCurrent(){

   // currentのtailが画面内に入ったら処理
   if(isInTail(_currentIndex)){

      // 画面外に出たらpause flagをたてる
       if(!_pause[_pastIndex] && isOutTail(_pastIndex)){
         _pause[_pastIndex] = true;
       }

      // pastViewがあったら2つ前の履歴に突っ込む。
       if(_pastView){
         _past2Index = _pastIndex;
         _past2View = _pastView;
         _positions[_past2Index] = _positions[_pastIndex];    
       }

      // 現在のcurrentを過去分に
       _pastIndex = _currentIndex;
       _pastView = _currentView;
       _positions[_pastIndex] = _positions[_currentIndex];

         // 次をcurrentに
       let _nextIndex = _currentIndex - _direction;

      // loopするようindexがはみ出た際の調整
       if(_nextIndex > _child.length - 1){
         _nextIndex = 0;
       }else if(_nextIndex < 0){
         _nextIndex = _child.length - 1;
       }

         // currentを次のdivに差し替え。
         // positionを0にセットしflagをfalseに。
       _currentView = _child[_nextIndex];
       _positions[_nextIndex] = 0;
       _pause[_nextIndex] = false;

      _currentIndex = _nextIndex;

  }
  //
}