DOM and WebGL not scrolling synchronously

Hiii 👋

I’m creating some DOM and WebGL elements (with three.js). I would like having them scrolling synchronously together. In my case there is some delay / lag between DOM elements and the WebGL scene.

This is a part of my code:

locoScroll.on('scroll', ({ scroll }) => {
  this.mesh.position.y = scroll.y;
})

The yellow blocks are WebGL and the blue dashed are the DOM elements:

Any suggestions how to fix this?

[DonPedroo]

I have the same issue, @rutgerbakker95 @mrlss if you guys solved this problem would you please share solution ?

[mrlss]

@rutgerbakker95 could you please show code example to see what does mean adding the scroll.y in a requestAnimationFrame. I have similar issue and would like to see how to get rid of this, much appreciate it!