[charts] Fix line animation #12892
[charts] Fix line animation #12892
Conversation
alexfauquette
added
bug 🐛
|
Deploy preview: https://deploy-preview-12892--material-ui-x.netlify.app/ |
| if (previousPathRef.current === null) { | ||
| return path; | ||
| } | ||
| return interpolateString(previousPathRef.current, path)(t); |
There was a problem hiding this comment.
Keeping interpolateString(...) in a useMemo like it was before would be nice, it seems to do a bit of initialization work. If this runs on every frame and there's many charts animating at once, it could run less smoothly.
|
Lines and points animations aren't smooth anymore: Click "Randomize" under the "Animation" part eg: https://deploy-preview-12892--material-ui-x.netlify.app/x/react-charts/lines/#animation |
It seems I can remove the imperative call to |
|
Moving to draft, because the logic leads to bugs with mouse hover. Will need to think back about it with a clearer mind Screencast.from.24-04-2024.16.22.17.mp4 |
Fix #12873
Here is the codesandbox with the fix:
https://codesandbox.io/p/sandbox/priceless-shaw-g23c8w?file=%2Fsrc%2FDemo.tsx%3A57%2C24
It remains an edge case if you toggle before the animation is resolved. It that case, the animation is not played and the chars goes directly to the final state. Which is less problematic than stopping wright in the middle.
I don't know why animation stopped. I opened an issue on this topic: pmndrs/react-spring#2273
The current workaround make sure to keep the last different value in memory