question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

DOM and WebGL not scrolling synchronously

See original GitHub issue

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:

screen

Any suggestions how to fix this?

Issue Analytics

  • State:open
  • Created 3 years ago
  • Comments:6

github_iconTop GitHub Comments

2reactions
DonPedroocommented, Mar 13, 2021

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

2reactions
mrlsscommented, Dec 4, 2020

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Progressive Enhancement with WebGL and React - 14islands
Syncing DOM content with WebGL canvas. A big challenge is to sync the fixed canvas elements with the scrollable HTML content.
Read more >
WebGL best practices - Web APIs - MDN Web Docs - Mozilla
Certain WebGL entry points - including getError and getParameter - cause synchronous stalls on the calling thread. Even basic requests can take ...
Read more >
Synchronous (non-passive) scroll events - Stack Overflow
Browsers made scroll events asynchronous (i.e. {passive: true} ) a while back. For my use case, synchronous provides a better user experience.
Read more >
Scrolling Images With WebGL and Three.js #41 - YouTube
Website is done with React-Three-Fiber, in this stream im just trying to replicate animations with my own knowledge.
Read more >
Scroll, Refraction and Shader Effects in Three.js and React
Keeping HTML in sync with the 3D world. We want to keep layout and text-related things in the DOM. · Accessibility · Responsiveness,...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found