The initial state of the animation will make the handle misplaced

[tjxtjxtjx]

Describe the Bug

Hello!When I put reactflow into a pop-up window, I found this phenomenon.

When adding a scale animation to or elements wrapped with , the rendering of the handle will be affected by the state at 0%.

For example.

When you add the following code. .react-flow { animation: popIn 0.2s; } @keyframes popIn { 0% { transform: scale(0.5); } 100% { transform: scale(1); } }

As shown in the figure, it seems that the position of all connections is affected by the scale state at 0%. And the greater the difference from scale(1) at 0%, the greater the offset.

It seems that nodes and lines are not affected, only the handle remain at 0% for rendering.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Add animation with scale
2. Change the initial scale .react-flow { animation: popIn 0.2s; } @keyframes popIn { 0% { transform: scale(0.5); } 100% { transform: scale(1); } }

Expected behavior

I hope that the initial 'scale' will not affect the rendering of the handle.

Screenshots or Videos

No response

Platform

• OS: [e.g. macOS, Windows, Linux]
• Browser: [e.g. Chrome, Safari, Firefox]
• Version: [e.g. 91.1]

Additional context

No response

[bcakmakoglu]

Afaik this is a known issue and the only workaround is: don't apply any transforms with an animation to the Flow component, hide it until the animation is actually done or call updateNodeInternals when the animation is done. You can use a fade animation for example, which wouldn't cause this issue but using something like a scale will. Maybe Moritz or Christopher know a way around this though

[moklick]

I am also not sure if there is a solution for this. We are measuring the positions of the handles at the very beginning and it doesn't match anymore when the animation is finished. I can take a look if you can provide a codesandbox (https://new.reactflow.dev/react-ts) for this.

[tjxtjxtjx]

Afaik this is a known issue and the only workaround is: don't apply any transforms with an animation to the Flow component, hide it until the animation is actually done or call updateNodeInternals when the animation is done. You can use a fade animation for example, which wouldn't cause this issue but using something like a scale will. Maybe Moritz or Christopher know a way around this though

Thank you for your reply.

[tjxtjxtjx]

I am also not sure if there is a solution for this. We are measuring the positions of the handles at the very beginning and it doesn't match anymore when the animation is finished. I can take a look if you can provide a codesandbox (https://new.reactflow.dev/react-ts) for this.

Thank you for your reply.Here is an example https://codesandbox.io/s/sharp-hugle-39v953?file=/src/styles.css

[moklick]

got it. You need to wait until the nodes are initialized and then add the animation: https://codesandbox.io/s/cocky-kepler-dp5xlh?file=/src/Flow.tsx:1421-1478