Repository navigation
[bug]: Spring Config function not called when using Imperative API #2186
Description
Which react-spring target are you using?
-
@react-spring/web -
@react-spring/three -
@react-spring/native -
@react-spring/konva -
@react-spring/zdog
What version of react-spring are you using?
9.7.3
What's Wrong?
I'd like to use the Imperative API (https://react-spring.dev/docs/concepts/imperative-api) with a Spring Config function (https://react-spring.dev/docs/advanced/config#config-per-springvalue) to customize friction, tension, etc per SpringValue, like this:
const springConfig = (key) => {
if (key === "opacity")
return { tension: 60, friction: 10, precision: 0.0001 };
else if (key === "scaleX") return { tension: 58, friction: 4.3 };
else if (key === "scaleY") return { tension: 70, friction: 4 };
return {};
};
const animation = useSpringRef();
const springs = useSpring({
ref: animation,
from: { opacity: 0, scaleX: 0.96, scaleY: 0.96 },
config: springConfig
});but the config function is never called (example: https://codesandbox.io/s/react-spring-bug-277lrl?file=/App.js).
To Reproduce
With this minimal snippet:
const springConfig = (key) => {
if (key === "opacity")
return { tension: 60, friction: 10, precision: 0.0001 };
else if (key === "scaleX") return { tension: 58, friction: 4.3 };
else if (key === "scaleY") return { tension: 70, friction: 4 };
return {};
};
const animation = useSpringRef();
const springs = useSpring({
ref: animation,
from: { opacity: 0, scaleX: 0.96, scaleY: 0.96 },
config: springConfig
});Or see this codesandbox: https://codesandbox.io/s/react-spring-bug-277lrl?file=/App.js
Expected Behaviour
Spring Config function should be called when using the Imperative API.
Link to repo
https://codesandbox.io/s/react-spring-bug-277lrl?file=/App.js
Reacted by Junesung Lee
Activity
dragonman225 commentedon Aug 16, 2023
I revisited the issue and found a way to make the config work—the config must be set via a
SpringRef's.start(), like thisBy the way, setting the config via a
SpringRef's.set()also doesn't work.Furthermore, looking more into the comparison of Imperative API v.s. stateful component example, I noticed that the
StateComponentre-renders because it uses React's state to trigger animation, not because the use ofuseSpring.Going back to my code, inspecting it, I realized that if I used
useSpringlike this:and called
animation.start()to trigger animations, the component did not re-render at all. It seemed that I could use the Imperative API withoutuseSpringRef(), and the documentation confused me.Docker-J commentedon Nov 22, 2023
Same here. I am really confused that
.set()does not work onSpringRef. I have no idea if it is designed to be in this way but seems it shouldn't be according to the documentation.