My goal is to create a scrolling box with a parallax effect, but I'm facing an issue where it won't bind with the Canvas element, even when both are included under the same div.
In the screenshot provided, you can see div1 and div2 each having their own scroll feature: https://i.stack.imgur.com/froLk.jpg
I have also tried placing them in separate divs: https://i.stack.imgur.com/MWBDk.jpg
Even when placed under the same div, I still can't eliminate the double scroll. Any suggestions? https://i.stack.imgur.com/7DZ4J.jpg https://i.stack.imgur.com/RYtFm.jpg
Could it be that react-spring parallax isn't compatible with react-three-fiber, leading to the existence of a library like react-three-flex?
You can access the codesandbox here