three and web are incompatible

[maciossek]

🐛 Bug Report

react-spring/web is not working when a @react-spring/three happens before, unless both is happeing in the same file. From here on this is just wild guessing from my side why this happens.

I am using react spring for a web and a threejs context. Respectivly importing both with

import { animated, useTransition, config, useSpring } from "@react-spring/web";
// or
import { useSpring, animated, config } from "@react-spring/three";

To Reproduce

Import a animated three component and a animated web component. The useSpring web component stops working:

Expected behavior

Importing react-spring/three and react-spring/web both enable working springs no matter if imported from different files.

Link to repro (highly encouraged)

Working animations: https://codesandbox.io/s/single-file-69el5?file=/src/App.js
Non Working example: https://codesandbox.io/s/multi-file-11oph?file=/src/App.js

Environment

• react-spring v9.2.3
• react v17.0.2

[joshuaellis]

Hm this is probably from the global side effect of importing anything from the animated file of @react-spring/three.

For some context we make @react-three/fiber control the rendering loop for three animated components because then it also works in XR see #1518. So the workaround would be to do:

Globals.assign({
  frameLoop: 'always',
})

which would then mean that our rafz package which uses the native requestAnimationFrame is running the render loop removing the r3f need.

If you have an idea on how to resolve this i'd be more than happy to hear it and talk through it more!

[ThomasRutzer]

Hi @joshuaellis, when I use your suggested solution, would that mean that I might overwrite r3f Canvas setting frameloop as well?

[maciossek]

So I updated to the latest packages and tried it out today. The issue remains while your workaround works well:

import { Globals } from "@react-spring/shared";

Globals.assign({
  frameLoop: "always",
});

If someone is looking for a copy-paste solution.

Can I suppress the warning from react-spring-rafz somehow? Cannot call the manual advancement of rafz whilst frameLoop is not set as demand is spamming my sonsole.

[ThomasRutzer]

hm, I am still unsure what Globals.assign({ frameLoop: "always" }) means. Let's say, I have a hybrid app with a HTML part and a Canvas part. And at some point I want to stop the Canvas from render like suggested here but animate some HTML ui instead with react-spring.
If I'd copy-paste the above solution, would that mean I'd implicitly re-force my Canvas to jump into the render loop again? Or is the same property naming just some coincidence?

[drcmda]

i have this example and it seems to run well: https://codesandbox.io/s/react-spring-animations-6hi1y?file=/src/index.js:109-230

// All hooks are cross platform now
import { useSpring } from "@react-spring/core"
// Platform knowledge is in here ...
import { a as aWeb } from "@react-spring/web"
// Platform knowledge is in here ...
import { a as aThree } from "@react-spring/three"

i don't know what frameloop: always is, but normally r3f must drive the frameloop and react-spring will integrate with it.

[maciossek]

Hm, even if I import the stuff from the core package, the issue remains:

https://codesandbox.io/s/multi-file-11oph

Maybe is is some sort of issue with webpack or lazy loading?

[joshuaellis]

Currently the "offending code" is in the global space, so importing @react-spring/three at all into the project which you're doing regardless of using the component or not causes the block.

[Khojanator]

I feel like the problem is importing Box but not using it, which causes an eslint error

If I change the code to use Box as well, it works as mentioned in the working animations example.

https://codesandbox.io/s/multi-file-forked-mpucx?file=/src/App.js