I’m trying to combine three.js content by react-three/fiber and framer-motion.
The problem is that when I use framer-motion to pin the canvas to the top, I notice a delay gap between my HTML content and the 3D content. See the GIF below:
And the expected behavior is:
Here are some findings and attempts:
-
When I resize the window, the issue can be fixed and it works as expected.
-
It’s not about the size of the div; even a smaller canvas can cause the problem.
-
If I set the Canvas frameloop to ‘never’, it works as expected, but the 3D content won’t show.
-
I simplified the environment and code on the sandbox, but the problem still occurs.
You can check the sandbox of this questions here.
Do you have any solutions, or is there a problem in my code?
-
When I resize the window, the issue can be fixed and it works as expected.
-
It’s not about the size of the div; even a smaller canvas can cause the problem.
-
If I set the Canvas frameloop to ‘never’, it works as expected, but the 3D content won’t show.
-
I simplified the environment and code on the sandbox, but the problem still occurs.