[Q&A] What is the differences between ScrollControls vs r3f-scroll-rig

[liho00]

May i know the differences of @react-three/drei ScrollControls and r3f-scroll-rig.
Seems like both able to achieve the same results?

[ffdead]

Hi @liho00 - thanks for the question. I think it's important to answer this question as you can achieve the same result but with a fundamental difference.

With ScrollControls you use empty HTML divs to allow the page to scroll, and then design your layout completely with WebGL. There is no semantic HTML content for screenreaders to find or search engines to index. You can use something like https://github.com/pmndrs/react-three-a11y to add accessibility but it comes with a performance overhead.

If you are building small website for a WebGL-only audience, this might be the simpler approach.

r3f-scroll-rig on the other hand, is based on the principle of progressive enhancement. You can use HTML/CSS for all the content and layout - and then enhance specific components with WebGL if the client supports it. This also makes it easy to render a simple mobile friendly website without any extra WebGL stuff.

Part of your team could focus on layout for the pages and another creative team could work in parallal to sprinkle WebGL effects on top.

Suggested reading: Progressive Enhancement with WebGL and React

[liho00]

Part of your team could focus on layout for the pages and another creative team could work in parallal to sprinkle WebGL effects on top.

Thanks for your explanations, appreciated.
After read the blog, I think the idea that you guys propose and build are great.

Im gonna start learning and building with it.

Thank you.