I'd like to add animation like this video

GoJS
1

hi, plz see this video:
https://www.useloom.com/share/682ca21b1a2d4596a7877ee4d5df80cf

I want animation like this video when arrange nodes, zoom in and zoom out.
For now, I made this functions:
// Align
onClickAlign() {
this.editDiagram.layout.doLayout(this.editDiagram);
}

// Zoom in
onClickZoomIn() {
this.editDiagram.commandHandler.increaseZoom(1.5);
}

// Zoom out
onClickZoomOut() {
this.editDiagram.commandHandler.decreaseZoom(2/3);
}

These are working without any animation.
How can I add animation like video?
Regards

2

For layout animation, call Diagram.layoutDiagram.

I’m not sure about Diagram scale and position animation.

3

You can do your own zoom animations if you’d like. You’d want to use requestAnimationFrame and some kind of easing function.

    function ease(t, b, c, d) {
      t /= (d / 2);
      if (t < 1) return c / 2 * t * t + b;
      return -c / 2 * ((--t) * (t - 2) - 1) + b;
    }

    function zoom(factor) {
      var duration = myDiagram.animationManager.duration;
      var start = +new Date();
      var finish = start + duration;
      var newScale = myDiagram.scale * factor;
      var oldScale = myDiagram.scale;

      function zoomTick() {
        var time = +new Date();
        var currentTime = time > finish ? duration : (time - start);
        myDiagram.scale = ease(currentTime, oldScale, newScale - oldScale, duration);
        if (time > finish) return;
        window.requestAnimationFrame(zoomTick);
      }
      window.requestAnimationFrame(zoomTick);
    }

    document.getElementById("zoomInBtn").addEventListener("click", function() { zoom(1.5); });
    document.getElementById("zoomOutBtn").addEventListener("click", function() { zoom(2/3); });

Demo here: https://codepen.io/jhardy/pen/qQNmmv?editors=1010

4

Thank you, jhardy!
It works like a charm! :)

5

I have another issue.
In the myDiagramDiv, when I zoom in and the content overflows, scroll bar appears.
https://www.useloom.com/share/657c747dba304a82a60517cff193d13e
I want to hide the scroll bar. In the manychat, which I showed in the video shared in loom, scrollbar is invisible at all.
https://www.useloom.com/share/34640e92b0c744dd89a96506d45b6c3d
I already set “myDiagramDiv.style.overflow = ‘hidden’” but scrollbar still appears.
In browser inspect mode, I found that there are 2 childs - canvas and div inside of myDiagramDiv.
When content overflows by zooming in, I found that size of canvas changes.
It changes only when content overflows.

So, how can I hide scrollbar?
Regards.

6
7

Wow. So simple. haha :) Thank you.