Transitions of panning and scale

GoJS
1

Hi,

Is there a way to do a transition when trying to pan and scale in the viewport?
In my case I have a search input outside of the canvas and when I find the right node, I want to pan to the correct place and scale to it, I do this by using diagram.scale and diagram.centerRect, but I wandered if there is a way doing the transition more smoothly (something like Prezi do for example when there are moving between different slides in the presentation).

Thanks,
Iftach

2

There is currently no built-way. We are adding the foundations of animation in 1.4, however this case may not be covered on release.

In the meantime, It should be possible to implement it yourself by changing the values of Diagram.position and Diagram.scale using timers. If that’s what you’d prefer to do and have any trouble implementing it, let me know.

3

Thanks for the answer.

Currently we’re evaluating the framework and this is just a “nice to have” feature and I was just wandering if we can get something like that out of the box.

Thank you,
Iftach

4

I see.

Animation is coming to GoJS with the release of 1.4, which you can preview in the alpha branch of our website: [Edit to refer to “latest” rather than “alpha”:] GoJS Visual Tree

Chiefly it is for layout animations and Diagram position, but will be extended to many more possibilities when it is ready.

5

Nice!

Thank you.

6

Hi,

I have the same question but I can’t find any documentation about it (even if the topic is quite old).
I would like to highlight a node by centering and zooming on it, with animation.
I’m using the version 1.5.4 of gojs.

Thank you,
Paul

7

There is very limited control for automatic animations, AnimationManager | GoJS API.

As it so happens, by coincidence at this very moment we are working to implement what you want for version 1.6.

8

In version 1.6 you can call CommandHandler.scrollToPart to scroll the diagram with animation to show a given Part.

FYI, that command, when not passed an argument Part, will cycle through the Diagram.selection, in turn bringing each selected Part into view.