Open dragonman225 opened 1 year ago
I revisited the issue and found a way to make the config work—the config must be set via a SpringRef
's .start()
, like this
animation.start({
to: { opacity: 1, scaleX: 1, scaleY: 1 },
config: springConfig
});
By the way, setting the config via a SpringRef
's .set()
also doesn't work.
animation.set({ config: springConfig }); // not working
Furthermore, looking more into the comparison of Imperative API v.s. stateful component example, I noticed that the StateComponent
re-renders because it uses React's state to trigger animation, not because the use of useSpring
.
Going back to my code, inspecting it, I realized that if I used useSpring
like this:
const [springs, animation] = useSpring(() => ({
from: { opacity: 0.2, scaleX: 0.2, scaleY: 0.2 },
config: springConfig
}));
and called animation.start()
to trigger animations, the component did not re-render at all. It seemed that I could use the Imperative API without useSpringRef()
, and the documentation confused me.
Same here. I am really confused that .set()
does not work on SpringRef
. I have no idea if it is designed to be in this way but seems it shouldn't be according to the documentation.
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:
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:
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