Infinite scrolling problem with showing elements

Question

I'm trying to do endless scrolling on my gallery page. I want three columns. The problem is, when I scroll down my wall, elements disappear and appear in weird ways ... and I want them to appear smoothly ... Additionally, I am sending my codepen

The strange thing is that when I have one column it all runs smoothly. Only in the case of three columns does this problem arise with ugly appearing elements ...

html

<div class="grid">
  <div class="columns">
    <div class="column-wrap">
      <div class="column">
        <div class="column__item">
          <div class="menu-item menu-item-first">
            <div class="image-box">
              <div class="image"></div>
            </div>
          </div>
          <div class="menu-item menu-item-first">
            <div class="image-box">
              <div class="image"></div>
            </div>
          </div>
          <div class="menu-item menu-item-first">
            <div class="image-box">
              <div class="image"></div>
            </div>
          </div>
          <div class="menu-item menu-item-first">
            <div class="image-box">
              <div class="image"></div>
            </div>
          </div>
          <div class="menu-item menu-item-first">
            <div class="image-box">
              <div class="image"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="column-wrap">
      <div class="column">
        <div class="column__item">
          <div class="menu-item menu-item-sec">
            <div class="image-box">
              <div class="image"></div>
            </div>
          </div>
          <div class="menu-item menu-item-sec">
            <div class="image-box">
              <div class="image"></div>
            </div>
          </div>
          <div class="menu-item menu-item-sec">
            <div class="image-box">
              <div class="image"></div>
            </div>
          </div>
          <div class="menu-item menu-item-sec">
            <div class="image-box">
              <div class="image"></div>
            </div>
          </div>
          <div class="menu-item menu-item-sec">
            <div class="image-box">
              <div class="image"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="column-wrap">
      <div class="column">
        <div class="column__item">
          <div class="menu-item">
            <div class="image-box">
              <div class="image"></div>
            </div>
          </div>
          <div class="menu-item">
            <div class="image-box">
              <div class="image"></div>
            </div>
          </div>
          <div class="menu-item">
            <div class="image-box">
              <div class="image"></div>
            </div>
          </div>
          <div class="menu-item">
            <div class="image-box">
              <div class="image"></div>
            </div>
          </div>
          <div class="menu-item">
            <div class="image-box">
              <div class="image"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

css:

.columns{
    display: flex;
    position: relative;
    justify-content: center;
    padding: 0 3rem;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    .column-wrap{
        display: flex;
        position: relative;
        height: 100vh;
        width: 33.3%;
        margin: 0 auto;
        .column{
            position: relative;
            display: flex;
            width: 100%;
            &__item{
                margin: 0;
                position: relative;
                z-index: 1;
                height: 100%;
                width: 100%;
                .menu-item{
                    position: absolute;
                    z-index: 1;
                    width: 100%;
                    padding: 2rem 0;
                    text-align: center;
                }
            }
        }
    }
}

jQuery:

/*--------------------
Vars
--------------------*/
const $menu = document.querySelector('.grid')
const $items = document.querySelectorAll('.menu-item')
let menuHeight = $menu.clientHeight
let itemHeight = $items[0].clientHeight
let wrapHeight = $items.length * itemHeight

let scrollSpeed = 0
let oldScrollY = 0
let scrollY = 0
let y = 0


/*--------------------
Lerp
--------------------*/
const lerp = (v0, v1, t) => {
  return v0 * ( 1 - t ) + v1 * t
}


/*--------------------
Dispose
--------------------*/
const dispose = (scroll) => {
  gsap.set($items, {
    y: (i) => {
      return i * itemHeight + scroll
    },
    modifiers: {
      y: (y) => {
        const s = gsap.utils.wrap(-itemHeight, itemHeight + 5, parseInt(y))
        // const s = gsap.utils.wrap(-itemHeight, wrapHeight - itemHeight, parseInt(y))
        return `${s}px`
      }
    }
  })
} 
dispose(0)


/*--------------------
Wheel
--------------------*/
const handleMouseWheel = (e) => {
  scrollY -= e.deltaY  
}


/*--------------------
Touch
--------------------*/
let touchStart = 0
let touchY = 0
let isDragging = false
const handleTouchStart = (e) => {
  touchStart = e.clientY || e.touches[0].clientY
  isDragging = true
  $menu.classList.add('is-dragging')
}
const handleTouchMove = (e) => {
  if (!isDragging) return
  touchY = e.clientY || e.touches[0].clientY
  scrollY += (touchY - touchStart) * 2.5
  touchStart = touchY
}
const handleTouchEnd = () => {
  isDragging = false
  $menu.classList.remove('is-dragging')
}


/*--------------------
Listeners
--------------------*/
$menu.addEventListener('mousewheel', handleMouseWheel)

$menu.addEventListener('touchstart', handleTouchStart)
$menu.addEventListener('touchmove', handleTouchMove)
$menu.addEventListener('touchend', handleTouchEnd)

$menu.addEventListener('mousedown', handleTouchStart)
$menu.addEventListener('mousemove', handleTouchMove)
$menu.addEventListener('mouseleave', handleTouchEnd)
$menu.addEventListener('mouseup', handleTouchEnd)

$menu.addEventListener('selectstart', () => { return false })


/*--------------------
Resize
--------------------*/
window.addEventListener('resize', () => {
  menuHeight = $menu.clientHeight
  itemHeight = $items[0].clientHeight
  wrapHeight = $items.length * itemHeight
})


/*--------------------
Render
--------------------*/
const render = () => {
  requestAnimationFrame(render)
  y = lerp(y, scrollY, .1)
  dispose(y)
  
  scrollSpeed = y - oldScrollY
  oldScrollY = y
  
  gsap.to($items, {
    scale: 1 -  Math.min(100, Math.abs(scrollSpeed)) * .005,
    rotate: scrollSpeed * 0.2
  })
}
render()