Animating R3F's both Camera & Orbit Controls using react-spring

[dieguezguille]

Hi everyone! I'm new to learning React, Three.js and R3F. Out of curiosity, I managed to create some Nav Links over a 3D model to kind of navigate between them. Then I wanted to go a bit further and included react-spring to make the transition smoother. I'm currently having 2 issues with this:

1. There's a very fast flick that happens sometimes when clicking other navigation links too fast. I tried to debug this but I'm unable to find its cause. A frame-by-frame analysis on Chrome Dev Tools's Profiler reveals only one frame where camera's position and rotation would be [0,0,0]. The rest is as it should.
2. There's another flick happening with the HTML Nav Links each time an animation finishes and they get rendered again.

As I said, I have little to no experience with these libraries but I want to understand why this is happening and what can I do to improve. Any links/resources/comments are greatly appreciated.

You can check the code in the sandbox here

[drcmda]

controls are made to control the camera, they'll overwrite it every frame. if you need to animate it while the controls are enabled it'll just turn into a race condition. you can either disable controls or animate scene contents, like a group instead of moving the camera. but this is a very common issue, i think you'll find lots of solutions in the threejs discourse forum, i've seen issues like that since i've started learning three.

[dieguezguille]

Hey Paul! Thanks for the quick response, I just saw this post was a duplicate. I realize there's an ongoing debate on whether to expose camera control methods on OrbitControls to the users or not and I'm glad to know there's this solution at least. I am really enjoying learning both R3F and react-spring, they're amazing tools! Now I have a better idea on how to improve my code. Cheers!