Is it possible to smoothly animate from a rendered position at one zoom level, to a rendered position at another zoom level, with all the graph elements staying within the viewport?
Here is a jsbin demonstrating my problem. After the large graph loads, click one of the nodes and notice how it animates off-screen and then on-screen. (You'll need the viewport to be narrow enough.)
https://jsbin.com/mimesam/9/edit?js,output
Is there a way around this? I really would like layout animations to work by default so that fit (zoom/pan) is taken into account during the layout animation, so that layout-fitted rendered positions animate smoothly to each other.
Description: start with a graph of a couple hundred elements. Use a layout to generate initial positions. Use a viewport that is small enough that the model positions are too large for the viewport, so that fit causes a zoom.
Then pick a subset of the graph, and invoke the same fit layout on that subset.
Ideally, the subset of the graph should smoothly animate in one direction, from the original position to the new position.
Instead, I see swoopy behavior, where the elements animate out of the viewport on their way to the model positions, before the fit kicks in and animates back to the zoomed rendered positions.
Try making things step by step and animated
cy.animate({
fit: { eles: cy.$() },
duration: 500,
complete: function () {
setTimeout(function () {
cy.layout({
name: 'breadthfirst',
animationDuration: 2000,
animate: true,
fit: true,
directed: true,
}).run();
}, 500);
},
});