Canvas is lagging behind when scrolling up and down

[fredm00n]

Hi again – sorry for all the recent questions!

I'm attaching a video showing a curious thing: the canvas seems to lag behind the other DOM elements when scrolling up and down.

I was wondering if you knew why and how to avoid that? It's quite noticeable when the Pixel Scan effect is surrounded by fixed html elements (text, images, etc), as seen on the video attached. It's a screen recording of a fork of your codepen here: https://codepen.io/fw3d/full/vYqzpGg

vfx.scroll.issue.mp4

Many thanks again for your precious help.

All the best
fred

[fand]

Hi Fred! Yeah, this is a known problem.
We have an issue here and I'm thinking about a new feature to solve this, but haven't got time to do this.
#14

I'll let you know once it's done 🙏

[fredm00n]

Thanks! And sorry for the issue duplicate. Looking forward to it 👍

[fand]

Lusion's technique could be a good option. Let me try
https://github.com/lusionltd/WebGL-Scroll-Sync

[fand]

Hi @fredm00n 👋
I recently implemented Lusion's scroll sync technique in VFX-JS.
It was released in @vfx-js/core@v0.7.0.

I forcked your CodePen sketch and checked that it works better than before.
https://codepen.io/fand/pen/RNPbOXz?editors=0010

Here's the screen recording I took on my phone (Android, Nothing Phone (2)).
To me, the scroll jank seems unnoticeable.

scroll.mp4