You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Ran into an issue where if I change my chart data using the XYChart, the AnimatedAnnotation seems to animate incorrectly.
Here's a video from the chart I'm working on, as you can see the annotation immediately jumps to the x position and animates to the y position
Screen.Recording.2023-11-01.at.09.38.47.mov
(slowed down version using a copy of the code)
Screen.Recording.2023-11-01.at.09.40.04.mov
Potential fix
I'm still not quite sure what's causing this to happen. However, to get this to work on my own project, I made my own annotation with a few changes related to these lines:
const animatedXY = useSpring({
from: {
x: lastXY.current.x - x,
y: lastXY.current.y - y,
},
to: { x: 0, y: 0 },
immediate: lastXY.current.x === undefined || lastXY.current.y === undefined, // Ensures it starts at the correct position
reset: true,
onRest: () => {
// Update the lastXY ref so that the next animation starts from the correct position.
lastXY.current = { x, y };
setIsAnimating(false);
},
onStart: () => {
setIsAnimating(true);
},
});
React.useEffect(() => {
if (isAnimating) {
// If we're already animating, update the lastXY ref so that the next animation
// starts from the correct position.
lastXY.current = { x, y };
}
}, [x, y, isAnimating]);
In the effect updating the reference, we only update the ref if it's currently animating
Use onRest to update the reference. Essentially waiting for the animation to finish before updating the last position.
I am not sure if that's the best fix though, I have yet to try to produce a minimum example but if relevant, I'm happy to do so.
The text was updated successfully, but these errors were encountered:
Description
Ran into an issue where if I change my chart data using the XYChart, the AnimatedAnnotation seems to animate incorrectly.
Here's a video from the chart I'm working on, as you can see the annotation immediately jumps to the x position and animates to the y position
Screen.Recording.2023-11-01.at.09.38.47.mov
(slowed down version using a copy of the code)
Screen.Recording.2023-11-01.at.09.40.04.mov
Potential fix
I'm still not quite sure what's causing this to happen. However, to get this to work on my own project, I made my own annotation with a few changes related to these lines:
visx/packages/visx-xychart/src/components/annotation/AnimatedAnnotation.tsx
Lines 37 to 46 in 6a14177
I am not sure if that's the best fix though, I have yet to try to produce a minimum example but if relevant, I'm happy to do so.
The text was updated successfully, but these errors were encountered: