Simply trying to animate the entire R3F Canvas component opacity, not just the background (toggle the opacity from 0% to 100% on click). I’ve been able to get the effect with GSAP by affecting the style attribute of the R3F Canvas component, however I haven’t been successful in doing it without unacceptable artifacts, which leads me to believe that I’m causing the animation to conflict with either the render loop or how the component is updating given that I’m wrapping the animation in a useEffect hook. Just curious if anyone has any insight on how to do this with R3F hooks or with react-spring (which i’ve tried, but get a “Canvas is not animatable, did you mean canvas” error when doing so). Any and all help is much appreciated. Thank you
the canvas is just a regular canvas dom element, you can animate it via css or any way you like: https://codesandbox.io/s/r3f-performant-gltf-loading-forked-vz9dz
the problem is mostly figuring out when threejs is ready. the moment it starts to paint stuff the first time it will face some overhead (compiling materials etc).
if this is for regular transitions, then consider animating canvas contents instead of the whole thing: https://codesandbox.io/s/7kohn
Duuude Thank you, my bad if this was some noob question. Thanks for creating all this cool stuff to use btw. Im a fan.