When updating the interpolator function, the correct function is called, but its result is not applied to the component.
To Reproduce
In the following stackblitz, the toggle button moves the black area from one shape to the other, and during the transition the useEffect will create a rerender that's blocking the animation
The interpolation function does a string interpolation between the current path and the previous one.
When logging the position of the first point in the interpolation result we can see that:
The toggle start the animation, moving it from 0 to 300
At t=0.6 the rerender is activated by the useEffect. The displayed SVG will stay in this render sate
A new interpolation starts from t=0 to t=1 and always returns position 300. But the SVG component will never git this position applied
Which react-spring target are you using?
@react-spring/web@react-spring/three@react-spring/native@react-spring/konva@react-spring/zdogWhat version of react-spring are you using?
9.7.3
What's Wrong?
When updating the interpolator function, the correct function is called, but its result is not applied to the component.
To Reproduce
In the following stackblitz, the toggle button moves the black area from one shape to the other, and during the transition the useEffect will create a rerender that's blocking the animation
The interpolation function does a string interpolation between the current path and the previous one.
When logging the position of the first point in the interpolation result we can see that:
Screencast from 24-04-2024 11:00:05.webm
https://stackblitz.com/edit/vitejs-vite-qpxosr?file=src%2FApp.tsx
Expected Behaviour
The interpolation result after the rerender should be applied to the component
Issue faced when working on https://github.com/mui/mui-x/issues/12873
Link to repo
https://stackblitz.com/edit/vitejs-vite-qpxosr?file=src%2FApp.tsx