Network animation on load

[TJRL]

Hi, I'd like to add a fly in animation on the network, starting very much zoomed in on one node, than zooming out to fit. However, it should run only once, when the page is loaded. I tried to set the initial zoom level with the beforeDrawing event, but that event triggers apparently over and over again, which makes it return to this position each time you try to move or zoom out.

network.on("beforeDrawing", function() {  
  network.focus(0, {scale:7});
});

I also tried with javacript window.onload, but I think that triggers too early, so nothing happens.

Any suggestions how to do this?

[TJRL]

Ah! Solved it myself already. Rather than network.on I should use network.once! So, this is what I got to make the animation start automatically and play once:

network.once("beforeDrawing", function() {
network.focus(0, {scale:10});
});

network.once("afterDrawing", function(){
network.fit({animation: {duration:2500, easingFunction: 'easeOutQuint'}});
});

[mojoaxel]

@TJRL That sounds interesting!! Maybe you can create a simple example that demonstrates this? We would be more than happy to include it in the examples.

[TJRL]

Sure!

https://jsfiddle.net/Thymus82/paxeppmv/18/

[yotamberk]

Added with #2476