fand
commented
2 years ago Hi @JohnPaulHarold ! sorry I didn't notice the issue.
I'm sorry but it's by design. REACT-VFX is heavy, it doesn't work well on mid-range devices...
To sync the positions of the 3D objects to the HTML elements, we have 2 solutions: Putting canvases at the same positions, or make one large canvas covering entire page. The first solution might work without scroll lag, but it causes other problems like element count limitation etc. Most mobile devices don't allow using many 3D canvases. If we create 3D canvases more than the limit, say 8, the canvases crash and shows error... that's horrible.
So I chose the second solution. In current implementation, REACT-VFX computes the positions of the elements every frame and render images at the position. I knew that this might cause scrolling lag on some devices, but I thought it's better than crashing.
If there's a better solution I'll update the implementation.
When I scroll through your example page, a lot of the VFX powered tags lag behind plain DOM ones while scrolling.
Tested on Android Moto G5 standard phone.