The issue I'm having isnt isolated to me, but all the devs ive spoken to that have tried to keep gl objects in sync with scroll on mobile (three.js/Native webgl). Would be cool to solve it hah.

Gl.js

class Gl {

  constructor() {
    Events.on('tick', this.run) // subscribe to globalraf ticker
  }
  
  run = ({ current }) => {
    /*
      Between routes I remove/add meshes from the scene, 
      so I'm just updating the position of those currently in the scene
    */
    const planes = this.scene.children
    
    if (planes) {
      for (let i = 0; i < planes.length; i++) {
        planes[i].updateY(current) // Update the mesh position
      }
    }

    this.renderer.render(this.scene, this.camera)
  }
}

GlobalRaf.js

  class GlobalRaf {

    tick = () => {

      /* Lerping the scroll value (this.target) that comes from my virtual scroll */
      this.current = lerp(this.current, this.target, this.ease)
      this.currentRounded = Math.round(this.current * 100) / 100

      /*
        Emitting scroll, the Gl things subscribe to this, as do the Smooth scroll / Transform of the DOM elements, 
        but for some reason th Webgl things can't keep up. Works fine on desktop devices.
      */
      Events.emit('tick', {
        current: this.currentRounded
      })
    }
    
  }

GlObject.js

class GlObject {
  
  setBounds(parent) {
    const rect = this.el.getBoundingClientRect() 

    this.bounds = {
      left: rect.left,
      top: rect.top,
      width: rect.width,
      height: rect.height
    }

    this.updateSize()
    this.updatePosition()
  }

  resize = () => {
    if (!this.visible) return
    this.setBounds()
  }

  calculateUnitSize(distance = this.position.z) {
    const vFov = gl.camera.fov * Math.PI / 180
    const height = 2 * Math.tan(vFov / 2) * distance
    const width = height * gl.camera.aspect

    return {
      width,
      height
    }
  }

  updateSize() {
    this.camUnit = this.calculateUnitSize(gl.camera.position.z - this.position.z)

    const { ww, wh } = store.bounds
    const x = this.bounds.width / ww
    const y = this.bounds.height / wh

    if (!x || !y) return

    this.scale.x = this.camUnit.width * x
    this.scale.y = this.camUnit.height * y
  }

  updateY(y = 0) {
    const { wh } = store.bounds
    const { top, height } = this.bounds

    this.position.y = (this.camUnit.height / 2) - (this.scale.y / 2)
    this.position.y -= ((top - y) / wh) * this.camUnit.height
  }

  updateX(x = 0) {
    const { ww } = store.bounds
    const { left } = this.bounds

    this.position.x = -(this.camUnit.width / 2) + (this.scale.x / 2)
    this.position.x += ((left + x) / ww) * this.camUnit.width
  } 
}