Zoom, scroll and center Node animation

GoJS
1

I am working on an animation to zoom, scroll and center a node horizontally. It works fine but when the node is more on the left or right of the diagram it can happen that while zooming in the animation flips right and left before arriving at the node.
I tried several Easing options, taking more time for the animation switching the order of the animation and trying to split it into several animations but nothing solved getting rid of this curving/bouncing.

Here is a video where you can see that the animation is not direct to the node but does a little curve. How can I get rid of that?

Bildschirmaufnahme 2022-11-16 um 14.13.42

Here is the code:

        const centeredWidth =
            (diagram.viewportBounds.width * diagram.scale) / 2;
        const animation = new go.Animation();
        animation.easing = go.Animation.EaseLinear;
        animation.add(diagram, 'scale', diagram.scale, 1);
        animation.add(
            diagram,
            'position',
            diagram.position,
            element.actualBounds.copy().offset(-centeredWidth, -180)
        );
        animation.start();
2

We’ll look into this later today.

3

This is a somewhat difficult problem to solve well, because animating the Diagram.position and scale at the same will naturally produce such an effect, since the Diagram position is affected by the viewport bounds, which is affected by the scale.

Here’s a sample showing your expected animation (more or less), plus two other options: https://gojs.net/temp/minimalScaleZoom.html

In it, compare the “typical” animation button to the “double” and “test” animations. You will need to reload the model in between tests.

“typical” animates both scale and position linearly

“double” uses two animations, one to animate scale linearly, but position with “EaseOutQuad”. This may be more acceptable, and you may want to experiment with other easing functions as this will be the simplest route to getting something more acceptable looking.

“test” experimentally animates the Diagram position by first translating it to viewport coordinates. This looks somewhat better, but is more difficult to follow and edit. It is up to you if you’d want to adapt this solution. I’d recommend trying the “double” approach and fooling around with easing functions, simply because the code maintainability will be easier later on.