DOM and WebGL not scrolling synchronously

[rutgerbakker95]

Hiii :wave:

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?

[rutgerbakker95]

Fixed it by adding the scroll.y in a requestAnimationFrame

[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!

[DonPedroo]

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

[rutgerbakker95]

@DonPedroo @mrlss I reopened this because my "solution" wasn't working at the end. It has been a while (sorry for that) but currently I'm doing some research and testing again. I'll let you know if the solution is finally there

[DonPedroo]

Thanks, @rutgerbakker95

I opened an issue here: https://github.com/locomotivemtl/locomotive-scroll/issues/255

I found somewhat what helps to solve the problem is to add speed value: scroll.y+(speed*2)

But it does not solve the issue 100% but makes it better for sure, it almost 100% eliminates unwanted momentum, but I don't think it is the cleanest solution.

[rutgerbakker95]

@DonPedroo Cool, I will give it a try but it's not a long term solution indeed.

I think the possible solution is mentioned in #154.

Would be nice of we somehow have control of the requestAnimationFrame Locomotive Scroll is using.

Maybe something like this:

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

[vianelk]

Hellloo I have the same problem and I don't know how to get solution. Please need help